CODEWITHSUNDEEP
jquerybackbone.js
hungfei
hungfei

Reputation: 17

Jquery backbone view out side call

but i try this is not work, what is directory.views.SearchPage for? can i call this function as above? thanks for your sharing!

directory.views.SearchPage = Backbone.View.extend({

templateLoader: directory.utils.templateLoader,
EmployeeListView: directory.views.EmployeeListView,

initialize: function() {
    this.template = _.template(this.templateLoader.get('search-page'));
},

render: function(eventName) {
    $(this.el).html(this.template(this.model.toJSON()));
    this.listView = new directory.views.EmployeeListView({el: $('ul', this.el), model:this.model});
    this.listView.render();
    //var thiskey = ' ';
    //this.model.findByName();
    //alert("HELLO WORLD!1");
    return this;
},
events: {
    "keyup .search-key": "search"
},
// Start the search function
search: function(event) {
    var key = $('.search-key').val();
    this.model.findByName(key);
}
});

i try to learning Jquery, but i get some stuck here... please make some help below:

I have a SearchView of Backbone below, i want page load run this SearchView, i code a events page "ready" and "load", but no trigger when page loaded...

i have a question how to make page load run this function? or how to call this SearchView backbone in out side function? 

    SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        var template = _.template( $("#search_template").html(), {} );
        this.$el.html( template );
    },
    events: {
        "click input[type=button]": "doSearch",
        "keyup": "doSearch",
        "load": "doSearch",
  "ready": "doSearch"  
    },
    doSearch: function( event ){
        // Button clicked, you can access the element that was clicked with event.currentTarget
        alert( "Search for " + $("#search_input").val() );
    }
});

var search_view = new SearchView({ el: $("#search_container") });

Upvotes: 1

Views: 289

Answers (1)

dcarson
dcarson

Reputation: 2853

You'll want to do this to instantiate your view after the page has loaded. 

var search_view ;

// jQuery loads yoru view on document ready
$(function () {
    search_view = new SearchView({ el: $("#search_container") });
});

If you want to call the doSearch function externally you just neeed to do this:

search_view.doSearch();

Assuming that you want to execute doSearch upon the page load, you may want to add it to the initialize method after the this.render(); call

Upvotes: 1

Related Questions