主干代码不呈现简单视图 [关闭]答案

【问题标题】：Backbone code not rendering simple View [closed]主干代码不呈现简单视图 [关闭]
【发布时间】：2014-07-25 14:46:15
【问题描述】：

简单的主干视图没有在元素内部渲染，并且没有错误

<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            var SearchView = Backbone.View.extend({
                el: '.container',
                initialize: function() {
                    this.render();
                },
                render: function() {
                    $(this.el).html("hello"); //tried both but not working. 
                    this.$el.html("hello"); 
                } 
             }); 
             var search_view = new SearchView();
        </script>
        <div class="container"></div>
    </body>
</html>

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建最小、完整和可验证的示例。
它不工作的原因只是因为在脚本执行之前DOM还没有准备好。 7票否决？需要很长时间才能将答案放在这里...
我建议你从这个adrianmejia.com/blog/2012/09/11/…开始
你们也可以帮他问这个问题...@KimGysen +1

标签： javascript backbone.js

【解决方案1】：

您的问题是因为您没有等待 DOM 准备好，请尝试像这样移动 div (http://jsfiddle.net/icodeforlove/68gGS/)

<body>
    <div class="container"></div>
    <script type="text/javascript">
        var SearchView = Backbone.View.extend({
            el: '.container',
            initialize: function() {
                this.render();
            },
            render: function() {
                $(this.el).html("hello"); //tried both but not working. 
                this.$el.html("hello"); 
            } 
         }); 
         var search_view = new SearchView();
    </script>
</body>

【讨论】：

或$(document).ready(function() { var search_view = new SearchView() }的变体之一。建议将 OP 也升级到最新的 jQuery、Underscore 和 Backbone 可能是个好主意。