2 
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()不是函数的错误。需要帮助。如何迭代我的集合中的模型？

4

2 回答 2

3

您的第一个问题是您正在定义您的集合并错误地实例化它。

model声明需要发生在集合的定义中，而不是实例化中：

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

然后你只需实例化它：

var paper_sections = new PaperSectionsList();

这将使您的代码正常工作。

但是，我不得不指出您对编码问题有些困惑。 Models并且Collections永远不应该调用函数render*。这些都是View担忧。在您的情况下，处理它的惯用方式是必须查看：（PaperSectionListView）ul和PaperSectionListItem（li）。模板和渲染功能存在于这些视图中。

于 2012-08-29T01:09:14.677 回答
0

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

但我认为上面的答案处理了核心问题，我同意模型和集合不应该处理渲染逻辑的建议。

注意：我清理了一些 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')
    });

});
于 2012-08-29T01:33:28.553 回答