在backbone.js中爲孩子們使用手動ID綁定是否正確

Question

我正在做一個基本上像Facebook牆一樣工作的應用程序。

基本上是文章和評論。

它的工作，但爲了呈現評論查看，我用我的帖子模板

<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。我覺得我應該用這個聰明的東西做點什麼。

任何人都可以指向正確的方向。

我正在使用BackBone關係來管理關係。

//編輯

按照要求一些實施

//一些功能與點擊去除脣上和功能，因爲我不認爲這涉及到我的問題。

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; 
} 
}); 

Answer 1

我大大利用了this.el引用。沒有必要通常在頁面上使用id的大部分內容，因爲在視圖內，您可以引用$（this.el），然後從頁面的該部分引用。 $（「。className」，this.el）將在頁面上的項目中選擇任何類。 el本質上是對視圖被渲染到的頁面上的區域的引用。一旦你掌握了它，它真的很乾淨。

Answer 2

我剛剛開始挖掘到骨幹網（並沒有做過與主幹關係尚未有的話）考慮到這一點，所以這裏是我的2美分：

• 骨幹定義ID，用於其模型，所以不需要定義你自己的id屬性。如果你檢查模型實例，即使它沒有在你的impl中明確定義，你也會看到它的id。
• 在我看來，你錯過了由單一評論模型組成的評論集合。然後適當地在視圖中附加模型事件。這樣你就不需要手動管理你的評論視圖渲染（這一切都是由基於事件觸發器的Backbone完成的）。

如果你還沒有看過BB示例Todos應用程序，我會建議給它看看 - 這應該有助於你設計你的評論模型和更好的觀點。

todos.js

todos app - 用火/ ChromeBug檢查代碼

希望這有助於。