backbone.js - onclick 事件更新模型属性但视图未呈现

Question

在我的主干中，我为每个模型创建了一个 onclick 事件，以更新名称.. 效果很好。我也在我的视图中获得触发器来更新模型的视图..

但是视图没有更新模型..并且html中的文本根本没有改变..

我的模型视图：

var studentView = Backbone.View.extend({
    tagName:'li',
    events:{
        'click':"called"
    },
    template:_.template($("#studentTemplate").html()),
    render:function(){
        this.$el.append(this.template(this.model.toJSON()));
        this.model.get('scored') > 60 ? this.$el.addClass("active") : null;
        return this;
    },
    called:function(){
        this.model.set('name','text'); // i am setting a name as 'text' for example
    }
});

我的渲染视图：

var studentsView = Backbone.View.extend({
el:$(".page"),
events:{
    "click #highScoreBtn":"showHighScore"
},
initialize:function(){
    this.collection = new collection(student);
    this.render();
    this.collection.on('change', this.renderOne,this);
},
render:function(){
    var that = this;
    _.each(this.collection.models, function(item){
        that.$el.find('ul').append(new studentView({model:item}).render().el);
    })

},
renderOne:function(data){
    this.$el.find('ul').append(new studentView({model:data}).render().el); // appending as new element instead updating the existing one..
}

})

所以，我的代码有什么问题..或者任何人在我的jsfiddle中纠正我这个..

这是我的jsfiddle链接

提前致谢..

Answer 1

这对我有用：

var studentView = Backbone.View.extend({
    tagName:'li',
    events:{
        'click':"called"
    },
    template:_.template($("#studentTemplate").html()),
    initialize:function(){
        this.listenTo(this.model, 'change', this.render);
    },
    render:function(){
        this.$el.html(this.template(this.model.toJSON()));
        this.model.get('scored') > 60 ? this.$el.addClass("active") : null;
        return this;
    },
    called:function(){
        this.model.set('name','text');
    }
});