【问题标题】:How to reload current route in Ember.js?如何在 Ember.js 中重新加载当前路由?
【发布时间】:2014-02-24 05:13:28
【问题描述】:

在 Ember.js 中,我有带有模型的路由。你能帮我吗,当我在路由播放列表中时,如何重新加载由另一个 JS 函数回调调用的这条路由(或将新数据设置为模型)?我一直在寻找文档这么久,但对我没有帮助。

App.PlaylistRoute = Ember.Route.extend({
 setupController: function(controller, model) {
  $.getJSON('api/playlist.php?' + Math.random().toString(36), function (data) {
   controller.set('model', data);
  });
 }
});

非常感谢!

【问题讨论】:

    标签: javascript ember.js


    【解决方案1】:

    似乎答案中的解决方案不适用于当前路线。 我遇到了同样的问题,并在这里尝试了解决方案,它奏效了。

    http://discuss.emberjs.com/t/refresh-current-view-page-after-language-change/4291/5#post_5

    在你的路线中。

    actions: {
      sessionChanged: function() {
        this.refresh();
      }
    }
    

    在你的控制器中。

    observeSession: function() {
      this.send("sessionChanged");
    }.observes("session.isAuthenticated"),
    

    【讨论】:

    • 不幸的是,我已经尝试过了,但没有任何反应。我没有在路线上使用任何模型,我只需要它重新渲染;但似乎没有任何效果。
    • 路由文件中的相同想法:``` afterModel() { this.get('session').on('sessionAuthenticated', () => { this.refresh(); }); } ```
    • 完美。请注意,单独的 this.send("sessionChanged"); 行将触发控制器中任何位置的刷新。
    • 重要:controller的action和rout的action不能同名
    【解决方案2】:

    有两种方法。

    一个是在播放列表路由中编写一个动作并在其中调用 this.refresh() 如需更多信息,您可以访问 Ember 指南refresh 路由方法。

    另一种方法是在您的控制器中,这取决于您需要重新加载路由使用的情况

    this.get('target.target.router').refresh();
    

    两者中的任何一个都可以帮助您刷新路线。

    以下来自 ember 指南的刷新方法的小记:

    刷新此路由和任何子路由上的模型,触发 beforeModel、model 和 afterModel 钩子,其方式与从其他路由过渡时进入路由的方式类似。当前的路由参数(例如article_id)将被传递到各自的模型钩子中,如果返回不同的模型,setupController 和相关的路由钩子也会重新触发。

    【讨论】:

    • 请注意我是this.get('target.router').refresh()。此外,在路由上调用refresh 似乎正在刷新正在刷新的路由的父路由和子路由(因此刷新一直冒泡到应用程序路由)。
    • 另外的第三种方式就是使用 this.model.set() 改变数据,然后让模板改变。例如 this.playlist.set('content', newplaylist) (假设是 ArrayProxy)。
    【解决方案3】:

    从控制器使用transitionToRoute:

    this.transitionToRoute('playlist', newModel);
    

    从路由使用transitionTo:

    this.transitionTo('playlist', newModel);
    

    例如,假设您在控制器上有一个动作

    App.PlaylistController = Ember.ArrayController.extend({
     actions: {
       grabNewModel: function(){
         //get some new model
         this.transitionToRoute('playlist', newModel);
       }
     }
    });
    

    【讨论】:

    • Ember.Controller.transitionToRoute 似乎没有重新加载当前路由。我打开了 LOG_TRANSITIONS_INTERNAL,它所做的一切都是“尝试过渡到索引”并完成。现在进入 transitionToRoute 代码...
    • 您需要发送一个不同的模型,如果您发送的是当前模型,那么重新加载路由没有正当理由。你想完成什么?
    • 用例:当您在路由“/foos”中将模型定义为列表时(例如使用 ember-data 的findQuery),在另一个路由“/foos”中创建相同类的模型/new" 然后使用Route#transitionTo 重定向回"/foos",新创建的模型不会出现,因为model() 钩子和setupController() 都没有在"/foo" 上执行。当使用具有动态路段的路线并运行transitionTo 'foo', 23 时,可以观察到此行为。那么我们如何强制“/foo”路由重新加载它的model()?
    • ^^ 这是一个糟糕的解决方案。它会起作用,但会破坏 Ember 的主要目的,即为您处理所有这些废话。如果这个新记录应该是多个集合的成员怎么办?上述解决方案需要深入了解需要插入新记录的每个位置,而简单地重新加载路由将自动处理所有事情。此外,如果服务器上有一条客户端还没有的新记录,而我们只是想确保我们有新数据怎么办?或者如果路由的模型是具有多个记录或集合的哈希?
    • 无论何时编写答案,目前确实这是一个糟糕的解决方案。如前所述,它会起作用,当时可能是唯一的选择,但不再是一个好的解决方案。我也没有对您或您的回答投反对票,所以请冷静一下。 :)
    【解决方案4】:

    当搜索如何刷新当前接受的答案已过时的路线时,此答案首先出现在谷歌上。如果您确实需要刷新路由并从控制器中的操作再次执行模型挂钩操作,请使用以下内容:

    在路上

    @action
    refreshModel() {
      this.refresh();
    }
    

    为了在控制器中调用这个动作

    this.send('refreshModel');
    

    例如:

    @action
    performUpdate(event) {
      event.preventDefault();
      // Perform necessary action
      this.send('refreshModel');
    }
    

    注意:这会将操作发送到调用它的控制器的相应路由,并仅更新该路由和任何子路由。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-08-26
      • 1970-01-01
      • 2017-04-20
      • 2016-10-20
      • 2016-08-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多