我正在开始使用backbone.js，我想构建一个模板，其中仅包含一个html按钮以及我的模型属性。所以我在我的html页面中定义了一个模板，如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
</body>
</html>
我正在尝试在我的 View 中构建我的模板:
var Bouton_View= Backbone.View.extend({
view_template: _.template( $('#button_template').html() ),
events:{
'click':'onClick'
},
initialize: function(){
this.$el=('#here');
},
render: function(){
this.$el.html(this.view_template(this.model.attributes));
return this;
},
onClick: function(){
var increment=0;
increment=this.Model.get("number_of_click")+1;
this.Model.set({"text":increment});
this.Model.set({"number_of_click":increment});
this.render();
}
});
但是当我在浏览器中运行该页面时，会显示此错误消息:
我很确定 js 文件 没有错误，因为我已经用另一个 html 文件尝试过，并且成功了。那么我的模板有什么问题吗？提前致谢
最佳答案
为什么会这样？
剧透:在这种情况下，下划线模板引擎没问题。
此示例的问题在于描述您的 Bouton_View 的代码，它可能位于此处:
<script src="backbone_test5.js"></script>
在 DOM 解析器到达之前执行
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
元素。这可以描述为
- 加载
backbone_test5.js文件并执行其内容 - 执行
_.template( $('#button_template').html() )- 在 DOM 中搜索带有
id="button_template"的元素 - 未找到
- 在不存在的
$元素上执行.html()函数 => 这会导致null - 执行
_.template(null)=>这会给你你提到的错误
- 在 DOM 中搜索带有
如何修复？
有几种方法可以做到这一点。
仅 HTML。重新排序代码，以便查询时 DOM 元素存在:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</body>
</html>
使用一些 js 代码。您可以使用 $(...) 包装 backbone_test5.js 文件的内容，以便它仅在 DOM 内容准备好后执行:
$(function () {
var Bouton_View = Backbone.View.extend({ /* ... */ });
});
关于javascript - 下划线方法 _.template() 不编译我的模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33346836/