主干javascript视图未重新呈现

Backbone javascript view not re rendering

本文关键字:新呈现 视图 javascript 主干      更新时间:2023-09-26

以下是在页面上发布列表的代码,它们是通过提示框删除和更新的2个函数,当我单击更新时,视图确实会在console.log中更新,但不会在DOM上刷新。

(function(){
window.App = {
    Models: {},
    Collections:{},
    Views: {}
};
window.template = function(id) {
    return _.template($('#'+id).html());
};
App.Models.Task = Backbone.Model.extend({
    validate: function(attrs){
        if (! attrs.title){
            return 'A task requires a valid title';
        }
    }
});
App.Collections.Task = Backbone.Collection.extend({
    model: App.Models.Task
});
App.Views.Tasks = Backbone.View.extend({
    tagName: 'ul',
    render: function(){
        this.collection.each(this.addOne,this);
        return this;
    },
    addOne: function(task){
    var taskView = new App.Views.Task({model:task});
    this.$el.append(taskView.render().el);
    }
});
App.Views.Task = Backbone.View.extend({
    tagName: 'li',
    template: template('taskTemplate'),
    initalize: function(){
        this.model.on('change:title',this.render,this);  
        this.model.on('destory',this.remove,this);
    },
    events: {
       'click .edit': 'editTask',
        'click .delete': 'destroy'
    },
    editTask: function(){
    var newTaskTitle =  prompt('what is the new text for the task ?',this.model.get('title')); 
        if(!newTaskTitle)return;
        this.model.set('title',newTaskTitle);
    },
    destroy: function(){
        this.model.destroy();            
    },
    remove:function(){
    this.$el.remove();
    },
    render: function(){
        var template = this.template(this.model.toJSON());
        this.$el.html(template);
        return this;
    }
});
window.taskCollection = new App.Collections.Task([
    {
        title: 'Go to the store',
        priority:3
    },
    {
        title: 'Go to gym',
        priority:2
    },
    {
        title: 'Learn backbone',
        priority:1
    }
]);
var taskView = new App.Views.Tasks({collection:taskCollection});
$('.tasks').html(taskView.render().el);
})();

好吧,看起来有点想通了,

我修改代码如下,

editTask: function(){
    var newTaskTitle =  prompt('what is the new text for the task ?',this.model.get('title')); 
        if(!newTaskTitle)return;
        this.model.set('title',newTaskTitle);
        **this.render();**
    }

还有这个销毁的代码

destroy: function(){
        this.model.destroy(); 
        this.$el.remove();
    },

有人能说出为什么这个命令不起作用吗?(我在youtube上的教程中看到了这一点)-this.model.on('change:title',this.render,this);