Backbone.js收集不迭代

Question

PaperSection = Backbone.Model.extend({ 
    defaults: { 
    title: '', 
    position: '' 
    }, 

    initialize: function(){ 

    }, 

    renderView: function(){ 
    return "<li>"+this.get('title')+", Position: "+this.get('position')+"</li>" 
    } 
}); 


PaperSectionsList = Backbone.Collection.extend({ 
    url: '/admin/paper/section/list.html', 
    size: 6, 
    initialize: function(){ 
    this.add(new PaperSection({ 
     id:1, 
     title: "Hello World", 
     position:1 
    })); 
    }, 

    comparator: function(section){ 
    return section.get('position'); 
    }, 

    renderView: function(){ 
    var html = "<ul>"; 
    _.each(this.models, function(section){ 
     html += section.renderView(); 
    }); 
    if(_.size(this.models) < this.size){ 
     html+="<li><a href='#add_section' class='btn btn-success btn-small' id='add_section'>Add Section</a></li>" 
    } 
    html+="</ul>"; 
    return html; 
    } 
}); 

PaperSectionView = Backbone.View.extend({ 
    initialize: function(){ 
    this.render(); 
    }, 

    render: function(){ 
    console.log(this.collection.get(1)); 
    var html = this.collection.renderView(); 
    this.$el.html(html); 
    } 
}); 

var paper_sections = new PaperSectionsList({ 
     model: PaperSection, 
    }); 
    var section_view = new PaperSectionView({ 
     collection: paper_sections, 
     el: $('#paper_sections') 
    }); 

當我運行代碼時，得到的錯誤是section.renderView()不是函數。需要幫助。如何迭代我的集合中的模型？

Answer 1

您的第一個問題是您正在定義您的收藏集並將其錯誤地實例化。

的model聲明需要在集合的定義發生，而不是在實例：

PaperSectionsList = Backbone.Collection.extend({ 
    model: PaperSection, 

然後你只需實例化它：

var paper_sections = new PaperSectionsList(); 

這將讓你的代碼工作。

但是，我不得不指出你對編碼問題有一些困惑。 Models和Collections不應該有稱爲render*的功能。這些是View的顧慮。在你的情況下，處理它的慣用方式將不得不查看：PaperSectionListView（ul）和PaperSectionListItem（li）。模板和渲染函數存在於這些視圖中。

Answer 2

我有你的代碼的工作如下...

但我認爲以上的回答處理的核心問題，而我的建議同意模型和集合不應處理繪製邏輯。

注：我清理了一些JSLint錯誤，如額外的逗號和缺少分號。

var PaperSection = Backbone.Model.extend({ 
    defaults: { 
     title: '', 
     position: '' 
    }, 

    initialize: function() { 

    }, 

    renderView: function() { 
     return "<li>" + this.get('title') + ", Position: " + this.get('position') + "</li>"; 
    } 
}); 


var PaperSectionsList = Backbone.Collection.extend({ 
    url: '/admin/paper/section/list.html', 
    model: PaperSection, 
    size: 6, 
    initialize: function() { 
     this.add(new PaperSection({ 
      id: 1, 
      title: "Hello World", 
      position: 1 
     })); 
    }, 

    comparator: function (section) { 
     return section.get('position'); 
    }, 

    renderView: function() { 
     var html = "<ul>"; 
     _.each(this.models, function (section) { 
      html += section.renderView(); 
     }); 
     if (_.size(this.models) < this.size) { 
      html += "<li><a href='#add_section' class='btn btn-success btn-small' id='add_section'>Add Section</a></li>"; 
     } 
     html += "</ul>"; 
     return html; 
    } 
}); 

var PaperSectionView = Backbone.View.extend({ 
    initialize: function() { 
     this.render(); 
    }, 

    render: function() { 
     console.log(this.collection.get(1)); 
     var html = this.collection.renderView(); 
     this.$el.html(html); 
    } 
}); 

$(function() { 

    var paper_sections = new PaperSectionsList({ 
     model: PaperSection 
    }); 

    var section_view = new PaperSectionView({ 
     collection: paper_sections, 
     el: $('#paper_sections') 
    }); 

});