Javascript Backbone.JS视图呈现，但不显示在页面上_Javascript_Backbone.js_Javascript Framework_Singlepage

Javascript Backbone.JS视图呈现，但不显示在页面上

javascript backbone.js

Javascript Backbone.JS视图呈现，但不显示在页面上,javascript,backbone.js,javascript-framework,singlepage,Javascript,Backbone.js,Javascript Framework,Singlepage,我正在将一个单页应用程序转换为backbone.JS。下面的视图使用body标记作为标记名-即，我希望视图占据页面的全部内容。我不想使用容器div或其他黑客 var ThingView = Backbone.View.extend({ tagName : "body", ... // Show the HTML for the view render : function() { console.log('Displ

我正在将一个单页应用程序转换为backbone.JS。下面的视图使用body标记作为标记名-即，我希望视图占据页面的全部内容。我不想使用容器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

var ThingView=Backbone.View.extend（{
标记名：“主体”，
... 
//显示视图的HTML
render:function（）{
console.log（'显示内容'）
$（this.el）.append（'test'）；
console.log（'finished'）
console.log（$（this.el））
返回此；//用于链接

渲染时，我看到

finished
[
<body>
    <h1>test</h1>
</body>
]

完成
[

测试

]

但是在我检查DOM之后，主体不再有文本。

标记名

指示如果构造函数没有提供el，应该使用什么标记主干来创建其el。创建的元素不会自动插入DOM中

最简单的方法可能是创建视图，将其el设置为

body

：

new ThingView({el:'body'})

标记名

指示如果构造函数未提供el，则应使用哪个标记主干创建其el。创建的元素不会自动插入DOM中

最简单的方法可能是创建视图，将其el设置为

body

：

new ThingView({el:'body'})

nikoshr解释的是正确的。添加到其中，使用标记名是正确的。但理想情况下，您应该使用el元素，它在Backbone.js库中定义为视图的元素（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>


$（文档）.ready（函数（）{
var ThingView=Backbone.View.extend({
el:$（“正文”），
初始化：函数（）{
_.bindAll（本“呈现”）；
这个。render（）；
},
render:function（）{
此.el.append（'test'）；
console.log（'finished'）；
log（$（this.el.html（））；
}
});    
var ThingView=新ThingView（）；
});

nikoshr解释的是正确的。添加到其中，使用标记名是正确的。但理想情况下，您应该使用el元素，它在Backbone.js库中定义为视图的元素（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>


$（文档）.ready（函数（）{
var ThingView=Backbone.View.extend({
el:$（“正文”），
初始化：函数（）{
_.bindAll（本“呈现”）；
这个。render（）；
},
render:function（）{
此.el.append（'test'）；
console.log（'finished'）；
log（$（this.el.html（））；
}
});    
var ThingView=新ThingView（）；
});

谢谢@nikoshr-这很有效。实际上我刚刚在构造函数中直接指定了“el”，因为ThingView将始终附加到同一个元素，而且它也有效。还有一个问题：如果我直接指定el，它是否会在现有文档中找到该元素，但如果我使用tagName（etc）它在内存中创建了一个新元素，该元素将被连接到DOM？@Naller。主干需要一个元素，无论是否连接到DOM。例如，在连接它之前在内存中构建它可以避免不必要的页面回流。谢谢@nikoshr-这很有效。实际上，我刚刚在构造函数中直接指定了“el”，正如ThingViews所做的那样始终附加到同一个元素，它也可以工作。还有一个问题：如果我直接指定el，它是否在现有文档中找到该元素，但如果我使用tagName（etc）它在内存中创建一个新元素，该新元素将被精确地附加到DOM？@Naller。主干需要一个元素，无论是否附加到DOM。例如，在附加它之前在内存中构建它可以避免不必要的页面回流。