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

好的，您的代码有一些问题，

您的启动方法有两个问题，

a) 你扔掉你的收藏

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

然后在 intialize 中覆盖您传递的集合

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 回答