2

私は残り火を学び、すべての概念を理解しようとしています。私は今、数日間立ち往生しています。

複数の「サブビュー」を持つビューを作成しようとしました (ember に名前はありますか?)。例えば：

+-----------------------------------------------+------------------+
| Post title                                    | new tag: ______  |
+-----------------------------------------------+                  |
| Post text                                     | * tag 1          |
|                                               | * tag 2          |
|                                               |                  |
+-----------------------------------------------+------------------+
| New comment: _____________ submit             | related posts    |
|                                               |                  |
| * comment 1 text                              | * post 1         |
| * comment 2 text                              | * post 2         |
| * comment 3 text                              |                  |
| * comment 4 text                              |                  |
| * comment 5 text                              |                  |
|                                               |                  |
+-----------------------------------------------+------------------+

私の考えは、選択した投稿の詳細を表示する独自のルートを持つ PostController を持つことです。コメントとウィジェットのネストされた要素を ( を使用して{{#each}}) 追加するのは簡単です。これは、PostController のネストされた要素のすべてのアクションとその他すべてを処理する必要があることを意味します。

それらのそれぞれ（コメント、タグ、および関連）を個別のコントローラーにするべきではありませんか？この場合、PostController をきれいに保ち、ネストされたすべてのアクションを独自のコントローラーで処理できます。これは正しい方法ですか、それともより良い方法がありますか?

はいの場合、これらのネストされたビューをどのように実装できますか。ember のネストされたビューに関する多くのトピックを読みましたが、その概念を理解できません。タグとコメントのルートは PostController にバインドされており、投稿なしでは使用されないため、ルートは必要ありませんが、よくわかりません。

この投稿を読んだ後、render を使用しようとしましたが、この場合に使用されるコントローラーとビューの概念がわかりません。

私が見逃したばかりの良い（更新された）ガイドがありますか、それとも誰かがこれがどのように機能するか説明してくれるか、正しい方向に導くことができますか？

4

1 に答える 1

2

で区切られたビューを作成しEm.View.create、コメントとタグでテンプレートに
挿入できます。post{{view}}

テンプレート:

<script type='text/x-handlebars' data-template-name='post'>
<div class='post'>
  <h1>{{title}}</h1>
  <div class='content'>{{{content}}}</div>
  <div class='tags'>{{view App.TagView}}</div>
  <div class='comments'>{{view App.CommentView}}</div>
  <div class='relatedPosts'>{{view App.RelatedPostView}}</div>
</div>
</script>

<script type='text/x-handlebars' data-template-name='comment'>
{{#each view.comments}}
  <!--some HTML codes for comments-->
{{/each}}
</script>

脚本：

App.CommentView = Em.View.create({
  templateName:'comment',
  comments:[],
  didInsertElement: function(){
    // Handler related to this view has to implement here
    // as there are delays for inserting elements
  }
});

App.PostController = Em.ArrayController.extend({
  getContent: function(){
    //some codes for loading content

    //You can implement all methods in single controller
    this.addComments(data.comments);

    //Or call other methods after loaded the content
    App.commentController.setup(data.comments);
  },
  addComments: function(data){
    App.CommentView.set('comments',data);
  }
});
于 2013-04-14T16:04:03.410 に答える