5

Meteor を使用すると、標準の jQuery 機能に問題が発生します。私のメインの「クライアント/サーバー」JS ファイルは次のようになります。

if (Meteor.is_client) {
$(document).ready(function(){
$('#myDiv').append("foo");
console.log('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'))
}
});

ここで機能しないメソッドは、View の render です。render メソッドの 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 docsで収集したものから$(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

メテオヘルパー

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 に答える