1

我有一个根据来自其他 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

4

1 回答 1

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 中添加了一个属性来过滤某些内容，我猜这一切都将由您的服务器完成，所以请忽略这些更改，因为它们与我提出的解决方案无关。

希望能帮助到你。

于 2013-08-21T21:32:35.733 回答