How to get page to update with new records from server without a route change?

问题

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}}

.... fetch

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)

回答1:

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);
    });
  }
}

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

来源：https://stackoverflow.com/questions/30685344/how-to-get-page-to-update-with-new-records-from-server-without-a-route-change

标签

ember.js