主干javascript视图未重新呈现
Backbone javascript view not re rendering
以下是在页面上发布列表的代码,它们是通过提示框删除和更新的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);
相关文章:
- 发送json对象或使用express路由呈现视图
- Koa 车把:无法呈现视图:找不到部分
- 主干.js绑定到集合“添加”呈现视图两次
- 重用服务器端的主干应用程序以在服务器端呈现视图
- 如何使用jsonp调用返回的数据在Durandal中呈现视图
- this.setState没有重新呈现视图ReactJS和RubyonRails
- UIwebview图片到新的视图控制器
- 单击时呈现视图事件
- 在 ajax 响应后在出口中呈现视图
- 如何从主干中的视图呈现视图.js
- Ember - 如何在没有 html 的情况下呈现视图的属性
- Rails 4 应用程序中的 $.ajax 请求不会呈现视图
- 动态呈现视图后,将事件绑定到视图的 el
- 如何在从多个url提取模型时呈现视图
- Backbone.js-按顺序插入新的视图项
- 如何在不丢失无效输入的情况下呈现视图中的Backbone.Model错误
- Rails中的AJAX GET请求,而不呈现视图/json
- 在RoR 3.1中如何使用Ajax呈现视图
- 在控制器呈现视图之前将ajax数据加载到$scope中
- {{link-to}} helper传递的对象的呈现视图问题