我写过流动的backbone.js程序:
<script>
var PostModel = Backbone.Model.extend();
var PostView = Backbone.View.extend({
template: _.template($('#posttemplate').html()),
intialize: function() {
console.log("intializing view");
},
render: function() {
console.log("rendering..");
var htmloutput = this.template(this.model.toJSON());
$('#postcontainer').html(htmloutput);
return this;
}
});
$(document).ready(function() {
var postmodel = new PostModel({title: "hello"});
var postview = new PostView({model: postmodel});
postview.render();
});
</script type="text/javascript">
<script type="text/template" id="posttemplate">
<div> Title: <%= title %> , post: <%= post %> </div>
</script>
<div class="container" id="postcontainer"></div>
当我运行代码时,我收到以下错误:
未捕获的TypeError:无法读取未定义
的属性'replace'但是我放的时候它的效果非常好 template = _.template($('#posttemplate')。html());进入渲染功能。
答案 0 :(得分:2)
您的问题是您在模板存在之前尝试访问该模板。 HTML文档从顶部到底部解析,当你有
时 template: _.template($('#posttemplate').html())
然后$('#posttemplate')
选择器不返回任何结果,因为尚未解析包含模板的元素。
尝试移动
<script type="text/template" id="posttemplate">
<div> Title: <%= title %> , post: <%= post %> </div>
</script>
元素高于您的第一个脚本元素。
将它放入render
函数时它起作用的原因是在文档触发就绪事件后调用render
,此时模板存在。