How to update model with new records in EmberJS

问题

I have a table that gets populated based on records from a rest API. All of this works fine.

Now I want to add some buttons on top of the table. When these buttons are clicked, the api is called again but this time with some parameters. Then I want the table to be updated with these new records. How can I achieve this?

My template looks like this:

<div id="myEmberElement">
  <script type="text/x-handlebars" id="posts">
        <div id="controls">
           <a href="#" id="mostrated">MostRated</a>
           <a href="#" id="mostsold">MostSold</a>
        </div>

        <table>
          <thead>
          <tr>
            <th>author</th>
            <th>book</th>
          </tr>
          </thead>
          <tbody>
            {{#each model}}
            <tr>
              <td>{{author}}</td>
              <td>{{book}}</td>
            </tr>
            {{/each}}
          </tbody>
        </table>
    </script>
 </div>

and my App.js is this:

App = Ember.Application.create({});

App.rootElement = "#myEmberElement";

App.Router.map(function() {
    this.resource("posts");
});

App.Request = DS.Model.extend({
    author: DS.attr("string"),
    book: DS.attr("string")
});

App.PostsRoute = Ember.Route.extend({
    model: function(){
        return App.Request.find();
    }
});
App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo("posts");
    }
});

App.Store = DS.Store.extend({
    adapter: DS.RESTAdapter.extend({
        url: '/myapp'
    })
});

What I've Tried

I stuck the following in my App.js but that did not help:

$("#mostrated").click(function (e) {
    e.preventDefault();
    alert('came here');
    App.Request.find({filter: "mostrated"})
});

Now when mostrated is clicked I can see that a new request is made to myapp/requests?filter=mostrated and data is also returned back from the server.

Question

Problem is that the table does not get repopulated with new data. It still has the old data. How can I force the {{#each model}} to populate the data again?? Sample of this app (with local data) is also on jsbin: http://jsbin.com/OcAyoYo/2/edit

回答1:

The short:

http://jsbin.com/OcAyoYo/12/edit

The long:

A possible approach to filter the content could be to define separate routes with their own model hooks setup, instead of using actions, this would result in the follow refactoring of your code:

Template

<script type="text/x-handlebars" id="posts">
  <div id="controls">
    {{#linkTo 'posts.all'}}All{{/linkTo}}
    {{#linkTo 'posts.mostRated'}}MostRated{{/linkTo}}
    {{#linkTo 'posts.mostSold'}}MostSold{{/linkTo}}
  </div>
  {{outlet}}
</script>

Router map

App.Router.map(function() {
  this.resource("posts", function() {
    this.route("all");
    this.route("mostRated");
    this.route("mostSold");
  });
});

Additional routes for the filtered content

App.PostsMostRatedRoute = Ember.Route.extend({
  model: function() {
    return App.Response.find({filter: "mostrated"});
  }
});

App.PostsMostSoldRoute = Ember.Route.extend({
  model: function() {
    return App.Response.find({filter: "mostsold"});
  }
});

As you will see in the demo mentioned above the changes I've done in your ajax call are just to simulate a filtering since no server is involved in the example. I've also added a property in your sample JSON to have something to filter for, all this would be done by your server I guess so ignore this changes since they are not related to my proposed solution.

Hope it helps.

来源：https://stackoverflow.com/questions/18365779/how-to-update-model-with-new-records-in-emberjs