如何在不更改路由的情况下从服务器获取页面以新记录更新？ [英] How to get page to update with new records from server without a route change?

问题描述

我有一个使用服务器端存储的Ember应用程序。在产品路线中，我有一个在产品路线中显示的产品列表（进入路线后会以通常的方式获取）

I have an Ember app that uses server-side storage. In the products route, I have a list of products that I display in my product route (which are fetched in the usual way upon entering the route)

   {{#each item in sortedProducts}}

   {{/each}}

....
获取

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

         })
      }
})

在控制器中，我进行排序

In the controller, I do the sorting

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

这有效，但是，我为用户提供了过滤显示记录的选项。单击按钮后，将调用一个操作，该操作查询服务器以获取记录的子集（它不只是过滤存储在缓存中的记录）

This works, however, I give the user the option to filter the records displayed. Upon clicking a button, an action is called that queries the server for a subset of records (it doesn't just filter the records that are already in the store cache)

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

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

This queries and returns the desired records, but the list on the page isn't updated i.e. the list on the page still displays all the records that are fetched upon application load.

问题：如何获取页面更新从服务器获取新记录而不更改路由，（解决方案将与按日期对条目进行排序的计算排序相集成）

Question: how do I get the page to update with the new records fetched from the server without a route change, (and will the solution integrate with the computed sort that already exists for ordering the entries by date)

推荐答案

要从一个动作（或其他任何地方）更新您的模型，您只需为其设置一个新值，Ember便会努力工作

To update your model from an action (or anywhere else) you simple need to set a new value for it and Ember will to the hard work for you.

在您的情况下，它应该像这样：

In your case it should look like this:

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

Here is a JSBin demonstrating how it works: http://emberjs.jsbin.com/walunokaro/3/edit

这篇关于如何在不更改路由的情况下从服务器获取页面以新记录更新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！