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 に答える