如何使用EmberJS中的新记录更新模型 [英] How to update model with new records in EmberJS

问题描述

我有一个基于休息API记录的表格。所有这一切都很好。

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

现在我想在桌面上添加一些按钮。当这些按钮被点击时，再次调用api，但是这次使用一些参数。然后我想要使用这些新记录更新表。我该如何实现？

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?

我的模板如下所示：

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

我的App.js是这样的：

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

我试过的

我在我的App.js中粘贴了以下内容，但没有帮助：

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

现在，当$ code> mostrated 被点击后，我可以看到对 myapp / requests？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.

问题

问题是表不会被新数据重新填充。它还有旧数据。如何强制 {{＃each model}} 再次填充数据？此应用程序的示例（包含本地数据）也在jsbin上： http://jsbin.com/OcAyoYo/2 /编辑

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

推荐答案

短：

a href =http://jsbin.com/OcAyoYo/12/edit =nofollow> http://jsbin.com/OcAyoYo/12/edit

过滤内容的一种可能的方法可能是使用自己的模型挂钩设置来定义单独的路由，而不是使用动作将导致您的代码重构：

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:

模板

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

路由器地图

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

已过滤内容的其他路线

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

正如您将在上述演示中看到的，您在ajax调用中所做的更改只是以模拟过滤，因为示例中没有涉及服务器。我也在你的示例JSON中添加了一个属性来进行过滤，所有这一切都将由您的服务器完成，因此我们猜测这些更改与我的建议解决方案无关。

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.

希望有帮助。

这篇关于如何使用EmberJS中的新记录更新模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！