5

当我使用 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'))
}
});

在这里不起作用的方法是在视图中渲染。渲染方法的 console.log 位很好，但 jQuery 附加不起作用。最初我想知道问题是否与我使用 Backbone 的方式有关，但现在我想知道这是否是 Meteor/jQuery 问题？

4

5 回答 5

13

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

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

根据我在Meteor 文档中收集的内容，使用$(document).ready()时调用甚至可能是多余的Meteor.startup

于 2012-05-17T17:58:14.977 回答
10

以下对我有用：

if (Meteor.is_client) {
    Template.templateNameThatContainsMyDiv.rendered = function(){
        $('#myDiv').append("foo");
        console.log('bar');
    };
}
于 2012-11-07T19:25:12.740 回答
5

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

于 2012-05-13T17:53:29.097 回答
0

这俩：

$(document).ready

和：

Template.templateName.rendered = function(){

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

{{#if show}}

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

{{bindEvents}}

在我的模板末尾，然后：

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

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

于 2014-09-21T06:26:47.537 回答
0

流星助手

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>

这对我有用。

于 2016-06-22T04:27:26.490 回答