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

【问题标题】：Backbone.JS view renders, but not displayed on pageBackbone.JS 视图呈现，但未显示在页面上
【发布时间】：2012-03-26 22:19:59
【问题描述】：

我正在将单页应用程序转换为backbone.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 后，正文不再有文本。

【问题讨论】：

标签： javascript backbone.js javascript-framework singlepage

【解决方案1】：

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

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

new ThingView({el:'body'})

【讨论】：

感谢@nikoshr - 这行得通。我实际上只是在构造函数中直接指定了“el”，因为 ThingViews 将始终附加到同一个元素，并且它也可以工作。
还有一个问题：如果我直接指定 el，它是否会在现有文档中找到该元素，但如果我使用 tagName（等）它会在内存中创建一个新元素，该元素将被附加到DOM？
@nailer 没错。 Backbone 需要一个元素，无论是否附加到 DOM。例如，在附加之前在内存中构建它可以避免不必要的页面重排。

【解决方案2】：

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>

【讨论】：