从列表宽度 Backbone.js 更新项目答案

【问题标题】：Update a item from a list width Backbone.js从列表宽度 Backbone.js 更新项目
【发布时间】：2011-08-11 12:33:36
【问题描述】：

我已经开始使用 Backbone.js，但我在更新 html 元素时遇到了问题。这是我的代码：

路由器：

App.Routers.Test = Backbone.Router.extend({  

    routes: {  
        "/start" :      "start",
        "/modify" :     "modify"
    }, 

    start: function() {  

        this.List = new App.Collections.Test;
        this.ViewList = new App.Views.Test({model: this.List});

        this.List.fetch();

    },

    modify: function() {  
        var model = this.List.get(1);
        model.set({name: 'Item modified'});
        alert('Modified!');
    } 

});

观看次数：

App.Views.Item = Backbone.View.extend({

    inizialize: function() {
        this.model.bind('change:name',this.render);
    },

    render: function() {
        $('#tmpl').tmpl(this.model.attributes).appendTo(this.el);   // jQuery Template
        return this;
    }

});

App.Views.Test = Backbone.View.extend({

    el: '#list',

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

    render: function() {
        $(this.el).empty();
        this.model.each(function(model) {
            var viewItem = new App.Views.Item({model: model});
            $('#list').append((viewItem.render().el));
        });     
    }



});

当我转到“#/modify”时，模型已更改，但在 html 视图上并未更新，尽管我在项目视图中添加了此代码：

this.model.bind('change:name',this.render);

也许我不明白主干的正确功能，如何表现？

PS：由于我是主干新手，请接受任何建议。

【问题讨论】：

标签： javascript jquery model-view-controller

【解决方案1】：

在您的modify 方法中，调用相应的视图。我通常传递model 和el 的实例。所以，例如：

this.modifyPage = new App.Views.Test({
    el: $('#list'),
    model: model
});

不过，如果您不需要 el 作为路由器的上下文，最好将 jQuery 的使用限制在视图中。

【讨论】：