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

StackOverflow https://stackoverflow.com//questions/9634508

题

我正在努力将单页应用程序转换为backbone.JS。下面的视图使用 body 标签作为它的 tagName - 即，我希望视图占据页面的整个内容。我不想使用容器 div 或其他 hack。 

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 后，主体不再有文本。

有帮助吗？

解决方案

tagName 指示如果构造函数未提供 el，Backbone 应使用什么标签来创建其 el。创建的元素不会自动插入到 DOM 中。

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

new ThingView({el:'body'})

其他提示

所解释的nikoshr是正确的。使用tagname添加到它是正确的。但是，理想情况下，您应该使用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>
.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top