Question

我正在努力将单页应用转换为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之后，身体不再有文本。

Answer 1

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

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

new ThingView({el:'body'})

Answer 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>

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

2 个答案: