0

さまざまな例を使用して以下のコードをまとめることができましたが、問題なく動作しているようですが、データがプリロードされていないようです。何が欠けているのか教えてください。

App = (function(Backbone, _){
    var Note = Backbone.Model.extend(
    {
        defaults:
        {
            part1: 'hello',
            part2: 'world'
        }
    });

    var TableList = Backbone.Collection.extend({
        model: Note
    });

    var ListRow = Backbone.View.extend(
    {
        tagName: 'li',

        initialize: function()
        {
            _.bindAll(this, 'render');
        },

        render: function()
        {
            $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');

            return this;
        }
    });

    var ListView = Backbone.View.extend(
    {
        el: $('#layout_content'),

        events:
        {
            'click button#add': 'addItem'
        },

        initialize: function()
        {
            _.bindAll(this, 'render', 'addItem', 'appendItem');

            this.collection = new TableList();
            this.collection.bind('add', this.appendItem);

            this.counter = 0;
            this.render();
        },

        render: function()
        {
            var self = this;
            $(this.el).append("<button id='add'>Add list item</button>");

            $(this.el).append("<ul></ul>");

            _(this.collection.models).each(function(item){ // in case collection is not empty
                self.appendItem(item);
            }, this);
        },

        addItem: function()
        {
            this.counter++;

            var note = new Note();

            note.set({part2: note.get('part2') + this.counter});

            this.collection.add(note);
        },

        appendItem: function(item)
        {
            var listRow = new ListRow({
                model: item
            });

            $('ul', this.el).append(listRow.render().el);
        }
    });

    var app = function(initialModels)
    {
        this.start = function()
        {
            this.tableList = new TableList();
            this.listView = new ListView({collection: this.tableList});
            this.tableList.reset(initialModels);
        };
    };

  return app;
})(Backbone, _);

次に、アプリを次のように初期化します。

<script language="javascript">
    var app = new App([{"id":"95","note_title":"can we find the title"},{"id":"93","note_title":"some title"}]);
    app.start();
</script>
4

1 に答える 1

1

さて、あなたのコードにはいくつかの問題があります。

start メソッドには 2 つの問題があります。

a) コレクションを捨てる

this.start = function()
{
    this.tableList = new TableList();
    this.listView = new ListView({collection: this.tableList});
    this.tableList.reset(initialModels);
};

そして initialize は、渡すコレクションを上書きする場所です

initialize: function()
{
    _.bindAll(this, 'render', 'addItem', 'appendItem');
    this.collection = new TableList(); // this one gets overwritten, remove this line
}

b) コレクションを設定するモデルでコレクションのリセットをトリガーしますが、イベントをリッスンしないか、次のようなリスナーを追加します。

this.collection.bind('reset', this.appendAllItems, this);

または、次のようにコレクションを作成します。

this.start = function()
{
    this.tableList = new TableList(initialModels);
    this.listView = new ListView({collection: this.tableList});
};
于 2012-05-15T17:11:07.130 に答える