Question

我有一个基于来自其他API的记录填充的表。所有这一切都很好。

现在我想在桌面上添加一些按钮。单击这些按钮时，将再次调用api，但这次使用一些参数。然后我想用这些新记录更新表。我怎样才能做到这一点？

我的模板如下所示：

<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是这样的：

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中遇到了以下问题，但这没有帮助：

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

现在，当点击mostrated时，我可以看到向myapp/requests?filter=mostrated发出新请求，并且还会从服务器返回数据。

问题

问题是表格没有重新填充新数据。它仍然有旧数据。如何强制{{#each model}}再次填充数据？此应用程序的示例（包含本地数据）也在jsbin：http://jsbin.com/OcAyoYo/2/edit

上

Answer 1

简短：

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

长：

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

<强>模板

<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中添加了一个属性来过滤一些东西，所有这些都可以由你的服务器来完成我想这样忽略这些变化，因为它们与我提出的解决方案无关。

希望它有所帮助。

如何使用EmberJS中的新记录更新模型

1 个答案:

简短：

长：