Backbone.JS视图呈现，但未显示在页面上
[英]Backbone.JS view renders, but not displayed on page
问题描述
我正在努力将单页应用程序转换为ribs.js。 下面的视图使用body标签作为它的tagName-即，我希望视图占据页面的全部内容。 我不想使用容器div或其他技巧。
var ThingView = Backbone.View.extend({
tagName : "body",
...
// Show the HTML for the view
render : function() {
console.log('Displaying thing')
$(this.el).append('<h1>test</h1>');
console.log('finished')
console.log($(this.el))
return this; // For chaining
渲染时，我看到
finished
[
<body>
<h1>test</h1>
</body>
]
但是，在我检查了DOM之后，正文不再包含文本。
2 个解决方案
解决方案1
7 已采纳 2012-03-09 13:15:21
tagName指示如果构造函数未提供el，则Backbone应该使用什么标签来创建其el。 创建的元素不会自动插入到DOM中。
最简单的方法可能是将其el设置为body来创建视图：
new ThingView({el:'body'})
解决方案2
0 2012-03-09 13:26:04
nikoshr解释的是正确的。 此外，使用tagName是正确的。 但理想情况下，您应该使用el元素，该元素在Backbone.js库中定义为View的元素（el）。
下面是执行此操作时应使用的理想代码。
<script type="text/javascript">
$(document).ready(function(){
var ThingView = Backbone.View.extend({
el:$("body"),
initialize: function(){
_.bindAll(this,"render");
this.render();
},
render:function(){
this.el.append('<h1>test</h1>');
console.log('finished');
console.log($(this.el).html());
}
});
var ThingView = new ThingView();
});
</script>
使用ribs.js在同一页面上的多个视图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.