Trigger onload event in Backbone js

Markuz Shultz picture Markuz Shultz · Jun 21, 2013 · Viewed 7.3k times · Source

Ok, I have a script that's fired in jQuery on document ready event, how to do the same thing in backbone? And where should I place my script then: router, view or model?

Here is my Header View

window.HeaderView = Backbone.View.extend({
 initialize: function (options) {
    this.render();
 },
 events : {
    "click .filter_button" : "filter_navigation",
    "click .search_button" : "live_filter_button",
    "keyup #live_filter" : "search"
},
 filter_navigation : function(e)
{       
       e.preventDefault();

    $('.filter').toggleClass('active');
    $('.search').removeClass('active');
},
live_filter_button : function(e)
{       
    e.preventDefault();

    $('.search').toggleClass('active');
    $('.filter').removeClass('active');
},
search : function(e)
{       
    var searchText = $("#live_filter").val().toLowerCase();
        $allListElements = $('.project_element');
        $matchingListElements = $allListElements.filter(function(i, el){
        return $(el).text().toLowerCase().indexOf(searchText) !== -1;
     });
    $allListElements.hide();
    $matchingListElements.show();
},
render: function () {
    $(this.el).html(this.template());
    return this;
}
});

Answer

Pawan picture Pawan · Jun 21, 2013

You can execute the script code in render event. And you can include the script in the html file itself... ex:

var Bookmark = Backbone.View.extend({
    template: _.template(…),
    render: function() {
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});