Есть ли что-то странное в том, как Meteor загружает jQuery?

У меня возникают некоторые трудности со стандартной функциональностью jQuery, когда я использую Meteor. Мой основной 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?


jquery meteor backbone.js backbone-views
person jonnyrichards    schedule 13.05.2012    source источник

Ответы (5)


arrow_upward
13
arrow_downward

Возможно, попробуйте использовать Meteor.startup на стороне клиента:

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

Из того, что я узнал из документов Meteor, вызов $(document).ready() может быть даже излишним при использовании Meteor.startup

person matb33    schedule 17.05.2012

arrow_upward
10
arrow_downward

Для меня работало следующее:

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

arrow_upward
5
arrow_downward

$(document).ready начинается после завершения загрузки исходного статического DOM, если вы используете какие-либо библиотеки шаблонов JS, то исходный статический DOM, скорее всего, пуст во время запуска $(document).ready. Итак, вам нужно будет подписаться с обратным вызовом, чтобы запустить ваш код, когда шаблон завершит рендеринг. Если это невозможно, вам придется использовать .on или .bind и прослушивать вставку узла DOM, который вы ищете...

person Tamara Wijsman    schedule 13.05.2012

arrow_upward
0
arrow_downward

Оба:

$(document).ready

и:

Template.templateName.rendered = function(){

решения зависят от шаблонов, отображаемых при запуске, и/или заполняется все их содержимое. Если вы, например, используете

{{#if show}}

для фактического содержимого в шаблоне jQuery может не всегда выполнять привязку. Я закончил тем, что добавил

{{bindEvents}}

в конце моего шаблона, а затем:

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

Кажется хакерским, но таким образом мой jQuery работает правильно, независимо от того, как фактический контент загружается по отношению к шаблону или самому документу.

person oskare    schedule 21.09.2014

arrow_upward
0
arrow_downward

Помощник метеора

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>

Это работает для меня.

person COREST    schedule 22.06.2016