Search code examples
functionbackbone.jsloadready

Trigger onload event in Backbone js


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;
}
});

Solution

  • 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;
        }
    });