如何在 jQuery 文档就绪后渲染 Backbone.js 视图？答案

【问题标题】：How to render Backbone.js view AFTER jQuery document ready has fired?如何在 jQuery 文档就绪后渲染 Backbone.js 视图？
【发布时间】：2016-03-01 16:46:23
【问题描述】：

我有一个简单的 Backbone.js 页面，在视图中我从 DOM 获取一个 div 并向其中添加另一个 div....

<body>
<div id="starbase"></div>
<script type="text/javascript">
(function($){

    var ListView = Backbone.View.extend({
        el: $("#starbase"), 

        initialize: function(){
            _.bindAll(this, 'render'); 
            this.render(); 
        },
        render: function(){
            $(this.el).append('<div id="starship"></div>');
        }
    });

    var listView = new ListView();
})(jQuery);
</script>
</body>

有什么方法可以在 jQuery DOM 就绪事件发生后强制这个渲染函数触发？这意味着 starship div 应该只在 jQuery 就绪之后才被添加到 starbase div。

【问题讨论】：

因为你的脚本在#starbase div 之后，所以它只会在它被创建之后执行，换句话说your scripts works 是你想要的方式
对不起@TJ，也许你误会了。我希望在触发 jQuery 文档就绪事件后触发渲染函数。现在我相信，因为它是一个就地函数，它会在遇到它的那一刻触发（我认为这是在 jQuery 文档准备好之前）。如果我的假设有误，请纠正我。
您的脚本位于文档的最底部，就在 </body> 结束之前，这意味着所有的 DOM 都准备好了。将其放入准备好的处理程序中没有实际区别。如果您的 <script> 在例如 <head> 内部，那么 DOM 就绪事件将很有用
嗨@TJ，我会不同意。如果我把它放在我的渲染函数 alert("The status is " + document.readyState ); 中，它会说状态是“正在加载”。如果 DOM ready 已经触发，它应该说“完成”对吗？
我的意思是，由于您的 <script> 标记位于 <body> 标记的末尾，因此当您的脚本运行时，所有元素都已创建并且可以正常工作，所以有不需要 jquery dom 就绪事件

标签： jquery backbone.js backbone-views backbone-events document-ready

【解决方案1】：

只需在构造函数调用的就绪事件上添加即可。请看下面的例子：

(function($){

var ListView = Backbone.View.extend({
    el: $("#starbase"), 

    initialize: function(){
        _.bindAll(this, 'render'); 
        this.render(); 
    },
    render: function(){
        $(this.el).append('<div id="starship"></div>');
    }
});

 $( document ).ready(function() {
    var listView = new ListView();
});
})(jQuery);

【讨论】：

您能否解释一下 OP 的代码有什么问题以及您的代码如何修复它...
问题是：“如何在 jQuery 文档就绪后渲染 Backbone.js 视图？”。原始代码可能有效，但未使用 ready 事件。这就是代码的作用。您对答案投反对票有什么原因吗？
这是你的假设。我要求澄清您的答案，因为我相信通过倾倒一些代码作为没有解释的答案（无论如何都不鼓励这样的答案），它使 OP 认为他的代码实际上不起作用，而事实是它确实起作用。这似乎是为了名誉而误导了一个可怜的人。