如何在没有路由更改的情况下从服务器获取新记录的页面?

时间:2015-06-06 16:56:39

标签: ember.js

我有一个使用服务器端存储的Ember应用程序。在产品路线中,我有一个产品清单,我在产品路线中显示(在进入路线时以通常的方式取出)

   {{#each item in sortedProducts}}

   {{/each}}

.... 的

App.ProductRoute = Ember.Route.extend({
      model: function(){
         return Ember.RSVP.hash({ 
            store: this.store.find('product'),
            //other code ommitted

         })
      }
})

在控制器中,我进行排序

sortProperties: ['date:desc'] //dated added
sortedProducts: Ember.computed.sort('model', 'sortProperties'),

但是,我可以为用户提供过滤显示记录的选项。单击按钮后,将调用一个操作来查询服务器以获取记录的子集(它不仅仅过滤已存储在缓存中的记录)

 actions: {
 filterByPriceAndColor: function(){
    this.store.find('product', {price: pricevariable, color: colorvariable});
 }
 }

此查询并返回所需的记录,但页面上的列表未更新,即页面上的列表仍显示应用程序加载时获取的所有记录。

问题:如何在没有路由更改的情况下使用从服务器获取的新记录来更新页面(并且解决方案将与按日期对条目进行排序的已存在的计算排序集成)

1 个答案:

答案 0 :(得分:1)

要从动作(或其他任何地方)更新model,您只需为其设置一个新值,Ember将为您的辛勤工作。

在你的情况下它应该是这样的:

actions: {
  filterByPriceAndColor: function() {
    var promise = this.store.find('product', {price: pricevariable, color: colorvariable});

    var self = this;
    promise.then(function(data) {
      self.set('model', data);
    });
  }
}

这是一个JSBin演示它是如何工作的:http://emberjs.jsbin.com/walunokaro/3/edit