Meteor加载jQuery的方式有什么奇怪的地方吗？

当我使用Meteor时，我在使用标准jQuery功能时遇到了一些困难。我的主“客户端/服务器”JS文件如下所示：

if (Meteor.is_client) {
$(document).ready(function(){
$('#myDiv').append("foo");
console.log('bar');
});
}

$(document).ready(function(){
var myModel = new MyModel({"name": "foo"});
var myModelView = new MyModelView({model: myModel});
});
var MyModel = Backbone.Model.extend({
initialize: function() {  
}
});
var MyModelView = Backbone.View.extend({
el: $('#myEl'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append(this.model.get('name'));
console.log(this.model.get('name'))
}
});

当我加载应用程序时，'bar'记录良好，但是.append不起作用。如果我在页面加载后在控制台中调用相同的.append，它可以正常工作。（类似地，如果我在非Meteor设置中运行相同的代码，它也可以正常工作。）

我实际想要运行的代码如下所示：

if (Meteor.is_client) {
$(document).ready(function(){
$('#myDiv').append("foo");
console.log('bar');
});
}

$(document).ready(function(){
var myModel = new MyModel({"name": "foo"});
var myModelView = new MyModelView({model: myModel});
});
var MyModel = Backbone.Model.extend({
initialize: function() {  
}
});
var MyModelView = Backbone.View.extend({
el: $('#myEl'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append(this.model.get('name'));
console.log(this.model.get('name'))
}
});

---

这里不起作用的方法是视图中的render。render方法的console.log位可以，但jQuery append不起作用。起初，我想知道问题是否出在我使用主干网的方式上，但现在我想知道这是否是Meteor/jQuery问题？

$（文档）。准备好了吗？

当初始静态DOM完成加载后，如果您使用的是任何JS模板库，那么在运行

$（document）.ready

时，初始静态DOM很可能是空的。因此，当模板完成渲染时，您必须订阅回调以启动代码。如果不可能，您必须使用

.on

或

.bind

并侦听您正在查找的DOM节点的插入…

或许可以尝试使用

Meteor。在客户端启动

：

if (Meteor.is_client) {
    Meteor.startup(function () {
        $(document).ready(function (){
            $('#myDiv').append("foo");
            console.log('bar');
        });
    });
}

---

从我在中收集的信息来看，

$（document）.ready（）

调用在使用

Meteor.startup

时甚至可能是多余的。以下几点对我很有用：

if (Meteor.is_client) {
    Template.templateNameThatContainsMyDiv.rendered = function(){
        $('#myDiv').append("foo");
        console.log('bar');
    };
}

双方：

$(document).ready

及

Template.templateName.rendered = function(){

解决方案取决于启动时显示的模板和/或填充的所有内容。例如，如果您使用

{{#if show}} 

对于模板中的实际内容，jQuery可能并不总是绑定。我最后添加了一个

{{bindEvents}}

在我的模板末尾，然后：

Template.templateName.bindEvents = function(){
$( "#accordion" ).accordion();
}

感觉有点黑客味，但这样我的jQuery就可以正常工作，无论实际内容是如何加载到模板或文档本身。

Meteor Helper 火焰

{{{#如果当前用户}}
JQuery下拉菜单
{{runJqueryPlugin}}
{{else}
登录按钮
{{/if}

这对我有用