首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Backbone javascript视图不重新渲染

Backbone javascript视图不重新渲染
EN

Stack Overflow用户
提问于 2014-09-29 22:25:18
回答 1查看 58关注 0票数 0

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

代码语言:javascript
运行
复制
(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);
})();
EN

回答 1

Stack Overflow用户

发布于 2014-09-29 22:38:46

好的,看起来像是想通了,

我修改了代码,如下所示

代码语言:javascript
运行
复制
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();**
    }

这段代码用来销毁

代码语言:javascript
运行
复制
destroy: function(){
        this.model.destroy(); 
        this.$el.remove();
    },

谁能告诉我为什么this.reder不能工作?(我在youtube上的一个教程中看到了这个)- this.model.on('change:title',this.render,this);

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26102234

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档