Question

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

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

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

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

$(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方法的console.log位没问题，但是jQuery追加不起作用。最初我想知道是否有关于我使用Backbone的方式是问题，但现在我想知道它是否是Meteor / jQuery问题？

Answer 1

也许尝试在客户端使用Meteor.startup：

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

根据我在Meteor docs收集的内容，使用$(document).ready()

时，Meteor.startup来电甚至可能是多余的

Answer 2

以下对我有用：

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

Answer 3

$(document).ready当初始静态DOM完成加载时，如果你使用任何JS模板库，那么初始静态DOM在运行$(document).ready时很可能是空的。因此，当模板完成渲染时，您必须使用回调订阅以启动代码。如果这不可能，您将不得不使用.on或.bind并监听您正在寻找的DOM节点的插入...

Answer 4

两者：

$(document).ready

和：

Template.templateName.rendered = function(){

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

{{#if show}}

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

{{bindEvents}}

在我的模板的末尾然后：

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

感觉hackish但这样我的jQuery无论如何加载与模板或文档本身相关的实际内容都能正常工作。

Answer 5

流星助手

Template.templateName.helpers({
    runJQueryPlugin: function() {
        $('#itemId').dropdown();
    }
}

火焰

<template name="templateName">
    {{#if currentUser}}
        <div id="itemId">JQuery Dropdown Menu</div>
        {{runJqueryPlugin}}
    {{else}}
        <div>Login Button</div>
    {{/if}}
</template>

这适合我。

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

5 个答案:

流星助手

火焰