2

我有一个 ember.js 应用程序。它使用posts.handlebars显示对象列表（我们称它们为Post对象）。每个列表项都包含一个链接，用于显示该帖子的详细信息（post.handlebars）。列表项和详细信息页面都包含一个删除链接，该链接从Posts集合中删除该对象。由于除了显示链接的标签之外在实现上没有区别，因此保持 DRY 是有意义的。

当前代码正在运行：

# router
App.Router = Em.Router.extend({
  ...
  "delete": function(router, event) {
    var post = event.context;
    if (confirm("Are you sure you want to delete the post with title '" + (post.get('title')) + "'?")) {
      post.deleteRecord();
      post.store.commit();
      App.router.transitionTo('posts.index');
    }

  }
});

# posts.handlebars
<ul>
{{#each post in controller}}
  <li>
    {{post.title}}
    <a {{action delete post}}>x</a>
  </li>
{{/each}}
</ul>

# post.handlebars
<p>{{title}}</p>
<a {{action delete content}}>Destroy</a>

但我不想重复包含删除操作的代码。

我的下一个最佳猜测是定义一个视图并在两个模板中重新使用它。但是，现在我无法通过将Post对象作为上下文传递给操作，方法是将其移动到视图（我可能正在做某事）。通过将事件从路由器移动到视图，我得到了它的工作，但这感觉不对。

我目前的解决方案如下所示：

App.DeletePostView = Em.View.extend({
  mouseUp: function(event) {
    var id, post;
    id = this.get('content.id');
    post = App.Post.find(id);
    if (confirm("Are you sure you want to delete the post with title '" + (post.get('title')) + "'?")) {
      post.deleteRecord();
      post.store.commit();
      App.router.transitionTo('posts.index');
    }
  }
});


# posts.handlebars
<ul>
{{#each post in controller}}
  <li>
        {{post.title}}
        {{#view App.DeletePostView contentBinding="post"}}
            x
        {{/view}}
    </li>
{{/each}}
</ul>

# post.handlebars
<p>{{title}}</p>
<div>
    {{#view App.DeletePostView contentBinding="this"}}
        Destroy
    {{/view}}
</div>

如果我想重新使用车把动作助手，有谁知道是否有更好的方法？

4

0 回答 0