backbone + binding - json

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 the change the hiii output of alert with the details of the person against whom the button is pressed...
{
"name": "john",
"img": "john.jpg",
"loc": "delhi",
"msg": "hello there"
}
this is the json which i m getting....when i click on button(having john name) it should show its msg....

Answer 1

If i've understood your question, you could just do something like...
var _self = this,
obj = Object;
$("<button>"+someVariable+"</button>")
.addClass('myName')
.appendTo(this.$el)
.on({
"click": function() { _self.fn(obj) }
});
​

Answer 2

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
}