Question

var ListView = Backbone.View.extend({
    el: $('hello'),
    events: {                           
          'click .myName':  'namefunc',
    },   
    initialize: function() {
        var stuff = new FieldCollection();
        stuff.parse();
        var self = this;
        stuff.fetch({
            success: function (collection, response) {
                console.log(response);
                self.render(response);
                return response;
            }
        });
   },
    render:function(output){
        _.each(output, function(i){
            p=i.name;
            $(this.el).append("<button class='myName'>"+p+"</button><h1>"+i.img+"</h1><br/>");
        },this);     

    },
    namefunc:function(){
        alert('hiii');
    }

});

how to bind button with class myName with function namefunc………i tried as shown in the code above…plz help

Answer 1

I refactored your code a bit. I’ve also put some comments to help you to achieve your goal and understand backbone more.

initialize: function() {
    var self = this;
    _.bindAll(this, 'render');
    this.collection = new FieldCollection();
    this.collection.parse();

    this.collection.fetch({
        success: function (collection, response) {
            console.log(response);
            self.render();
        }
    });
},

render:function(){
    var self = this;
    _.each(this.collection, function(model) {
        // here you should create subviews and delegate events within particular view
        // i.e:
        // self.buttonViews.push(new ButtonView({ model: model}));
        // but for now you can use data-id attribute to match the button you clicked
        $(self.el).append("<button class='myName' data-id=" + model.id + ">" + model.name + "</button><h1>" + model.img + "</h1><br/>");
    });     
},

namefunc:function(){
    //use data-id attribute we put in button tag earlier to catch the id
    //and use this.collection.get('id') function to get the model you want to get parameters of
}