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);
})();