CODEWITHSUNDEEP
javascriptjquerybackbone.js
Defyleiti
Defyleiti

Reputation: 555

The right way to initialize jquery library in backbone.js

In jquery if i have a library i can initialise it by doing the following.

<script>
$(document.ready).ready(function(){

$("#accordion").accordion(); // Jquery accordion library

}
</script>

Now in Backbone:

Main.js

var MyView = Backbone.View.extend({

el: '#wrapper',

initialize: function(){
this.render();
},
render: function(){
$("#accordion").accordion();
}


});
var myview = new MyView();

Is this the right way of doing it?.

Upvotes: 0

Views: 278

Answers (2)

Stumblor
Stumblor

Reputation: 1140

It should be

$("#accordion", this.$el).accordion();

You should be aware that using this technique means that the dom element may not be rendered yet, so your plugin internals shouldn't ever be referencing the dom - only the JQuery object you passed in (some poorly written plugins do this). If you find you are having trouble with this, use a javascript setTimeout or an underscore _defer to wait until the object is rendered to the page.

Also. If you question was in regards to your concern for more javascript dom separation (aka the knockout or angular approach) then you should take a look at knockback. It merges backbone models with knockout viewmodels and dom two way binding. JQuery plugins can then be declared as bindings so they then get called directly from your dom templates. No need to worry about dom rendering.

Upvotes: 0

Felix
Felix

Reputation: 38102

I think the correct way is to change:

$("#accordion").accordion();

to:

this.$el.find('#accordion').accordion();

From the docs:

If jQuery is included on the page, each view has a $ function that runs queries scoped within the view's element. If you use this scoped jQuery function, you don't have to use model ids as part of your query to pull out specific elements in a list, and can rely much more on HTML class attributes. It's equivalent to running: view.$el.find(selector)

Upvotes: 3

Related Questions