0

基本的にFacebookの壁のように機能するアプリをやっています。

基本的に投稿とコメント。

動作していますが、CommentViewをレンダリングするために、投稿テンプレートでこれに似たコードを使用しています

<div class="wall-post"> 
    <div class="wall-post-content">${PostContent}</div>        
    <div class="wall-post-comments" id="wall-post-comments-${PostId}"></div>
</div>

次に、このようにその投稿のコメント領域のIDを使用します。

var comment_view = new PostCommentView({ model: post.get("Comments") });
this.$('#wall-post-comments-'+ post.get("PostId")).append($(comment_view.render()));

これは機能しますが、自分のIDに対して手動でバインドするべきではないということを教えてくれます。this.elで何か賢いことをすべきだと思いますか？

誰かが私を正しい方向に向けることができますか？

関係を管理するためにBackBoneRelationalを使用しています。

//編集

要求に応じて、実装のいくつか

//クリック偶数と機能に関連する一部の機能は、私の質問に関連するとは思わないため、削除されました。

PostModel = Backbone.RelationalModel.extend({
urlRoot: '/api/post',
idAttribute: 'PostId',
relations: [{
    type: Backbone.HasMany,
    key: 'Comments',
    relatedModel: 'CommentModel',
    reverseRelation: {
        key: 'Post',
        includeInJSON: 'PostId'
    }
}]
});


CommentModel = Backbone.RelationalModel.extend({
    urlRoot: '/api/comment',
    idAttribute: 'PostId'
});


PostCollection = Backbone.Collection.extend({
    url: '/api/post',
    model: PostModel
});


PostListView = Backbone.View.extend({
tagName: 'div',

className: 'PostListView',

initialize: function(){
    _.bindAll(this, 'render', 'render_thread_summary', 'on_submit', 'on_thread_created', 'on_error');
    this.model.bind('reset', this.render); 
    this.model.bind('change', this.render); 
    this.model.bind('add', this.render_thread_summary); 
},
 template: $('#wall-post-template').html(),

render: function() {
    $(this.el).html($(this.template).tmpl(this.model.toJSON()));

    this.model.forEach(this.render_thread_summary);
    return $(this.el).html();
},
render_thread_summary: function(post) {
        var comment_view = new PostCommentView({ model: post.get("Comments") });
        this.$('#wall-post-comments-'+ post.get("PostId")).append($(comment_view.render()));
}
});


PostCommentView = Backbone.View.extend({   

initialize: function(){
    _.bindAll(this, 'render', 'on_click');
    this.model.bind('change', this.render);
},

template: $('#wall-comments-template').html(),
render: function() {
    var html = $(this.el).html($(this.template).tmpl(this.model.toJSON()));
    return html;
}
});
4

2 に答える 2

0

私はバックボーンを掘り下げ始めたばかりです（そしてバックボーンリレーショナルではまだ何もしていません）ので、それを念頭に置いてここに私の2セントがあります：

  • バックボーンはモデルのIDを定義するため、独自のID属性を定義する必要はありません。モデルインスタンスを調べると、implで具体的に定義されていない場合でも、そのIDが表示されます。
  • 単一のコメントモデルで構成されたコメントコレクションが不足しているように思われます。次に、ビュー内にモデルイベントを適切に添付します。そうすれば、コメントビューのレンダリングを手動で管理する必要がなくなります（すべて、イベントトリガーに基づいてBackboneによって実行されます）。

BBサンプルのTodosアプリをまだ調べていない場合は、見てみることをお勧めします。これは、コメントモデルを設計し、見やすくするのに役立ちます。

todos.js

todosアプリ-Fire/ChromeBugを使用してコードを検査します

お役に立てれば。

于 2012-04-18T22:22:28.617 に答える
0

this.elリファレンスを大幅に活用していませんでした。ビュー内では$（this.el）を参照してから、ページのその部分から参照できるため、通常、ページ上のほとんどのものにIDを使用する必要はありません。$（ "。className"、this.el）は、ページのアイテムに含まれるクラスを選択します。elは基本的に、ビューがレンダリングされたページ上の領域への参照です。一度コツをつかめば本当にきれいです。

于 2012-04-26T13:18:41.537 に答える