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