mcc*_*n19 3 backbone.js underscore.js
我一直在寻找并找到了很多答案,但似乎都没有效果.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Shopping Cart
</title>
<link rel="stylesheet" href="lib/style.css" type="text/css">
</head>
<body>
<script id="rtemp" type="text/x-underscore-template"">
<span><%= title %></span>
</script>
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<script src="lib/script.js" type="text/javascript"></script>
</body>
<script>
var Photo = Backbone.Model.extend({
initialize: function(){
console.log('this model has been initialized');
this.bind("change:title", function(){
var title = this.get("title");
console.log("My title has been changed to.. " + title);
var pv = new PhotoView();
pv.render();
});
},
setTitle: function(newTitle){
this.set({ title: newTitle });
},
setLocation: function(newLoc)
{
this.set({location:newLoc});
}
});
var PhotoView = Backbone.View.extend
({
el: $('body'),
render: function(event)
{
var name = myPhoto.get('title');
console.info(name);
var template = _.template($('#rtemp').html(), {title:name});
console.info(this.model);
$(this.el).html(template);
return this;
}
});
</script>
</html>
第一;
创建方法的新实例
var newPhoto = new Photo();
newPhoto.setTitle('Fishing');
这项工作很好,它将通过模板加载到身体.但是,如果我再这样做,
newPhoto.setTitle('Sailing');
我收到错误 - "无法调用方法'替换'为null"
没有线路错误,但我相信它是在
var template = _.template($('#rtemp').html(), {title:name});
mu *_*ort 24
你这里有一些错误.
您的模板"在type属性中有一个double ,它应该是:
<script id="rtemp" type="text/x-underscore-template">
它的视图应该render引用myPhoto它应该是this.model:
var name = this.model.get('title');
而你的主要问题是你的视图<body>用作它this.el,你的模板在里面<body>.
您完全替换<body>渲染视图时的内容:
$(this.el).html(template);
所以在第一次render通话后,就没有了#rtemp.然后,在下一个render电话中,您尝试这样做:
var template = _.template($('#rtemp').html(), ...);
但由于#rtemp不再是DOM,所以一切都崩溃了.
如果您立即抓取模板:
var PhotoView = Backbone.View.extend({
el: $('body'),
template: _.template($('#rtemp').html()),
//...
});
然后用this.template()在render:
render: function(event) {
//...
var template = this.template({
title: name
});
//...
}
你会有更好的运气.当然,您需要确保使用此方法在文档就绪处理程序中定义视图,或者#rtemp在定义视图时可能无法使用.
演示:http://jsfiddle.net/ambiguous/dwGsM/
也就是说,您的应用程序结构相当奇怪.你有一个模型可以监听自己,然后模型创建并在某些内容发生变化时呈现视图.听自己的模型本身就很好,但通常你会有模型的视图,当模型发生变化时,视图会重新渲染(或者只是部分).
你的模型看起来应该更像这样:
var Photo = Backbone.Model.extend({
setTitle: function(newTitle) {
this.set({ title: newTitle });
},
setLocation: function(newLoc) {
this.set({ location: newLoc });
}
});
然后你的观点是这样的:
var PhotoView = Backbone.View.extend({
el: $('body'),
template: _.template($('#rtemp').html()),
initialize: function() {
_.bindAll(this, 'render');
this.model.on('change:title', this.render);
},
render: function(event) {
this.$el.html(
this.template(this.model.toJSON())
);
return this;
}
});
将_.bindAll在initialize确保this.render将正确的调用this; 然后initialize绑定到事件,以便它可以响应模型中的更改.视图知道它关心什么,因此它负责处理模型中的更改.在这里render,你通常只是打电话toJSON来获取模板的数据.此外,较新版本的Backbone包含$(this.el)视图中的缓存版本,this.$el因此您不再需要$(this.el)自己了.
然后你就像这样开始:
var newPhoto = new Photo();
var viewPhoto = new PhotoView({ model: newPhoto });
newPhoto.setTitle('Fishing');
newPhoto.setTitle('Sailing');
通过model在创建视图时指定选项,可以告诉视图要使用的模型.
您可能还想将模板<script>移出<body>.
新的和改进的演示:http://jsfiddle.net/ambiguous/Kytw7/