Geek asks and answers

Something strange about the way Meteor loads jQuery?

I'm having some difficulties with the standard jQuery features when I use Meteor. My main "client / server" JS file is as follows:

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

When I download the application, the "bar" logs are fine, but .append does not work. If I call the same .append in the console after the page loads, it works fine. (Similarly, if I run the same code in a setting other than Meteor, it also works fine.)

The code I really want to run is as follows:

$(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 append . , - , Backbone, , , Meteor/jQuery?

+5
5

, Meteor.startup :

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

, , $(document).ready() Meteor.startup

+13

:

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

$(document).ready , DOM , JS, DOM $(document).ready. , , , . , .on .bind DOM node, ...

+5

:

$(document).ready

:

Template.templateName.rendered = function(){

, , / . , ,

{{#if show}}

, jQuery .

{{bindEvents}}

, :

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

Feeling hacky, but in this way my jQuery works fine no matter how the actual content is loaded relative to the template or document itself.

0
source

Meteor helper

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

Blaze

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

This works for me.

0
source

More articles:


All Articles