public
Created

backbone.js: how to get the model of the clicked html element

  • Download Gist
1.html
HTML
1 2 3
<script id="item-template" type="text/x-jquery-tmpl">
<li><a href="#">${name}</a></li>
</script>
1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
Item = Backbone.Model.extend({});
ItemCollection = Backbone.Collection.extend({
model: Item
});
 
ItemListView = Backbone.View.extend({
tagName: "ul",
events: {
"click a": "clicked"
},
clicked: function(e){
e.preventDefault();
var item = // ??? how do we get the item?!
var name = item.get("name");
alert(name);
},
render: function(){
var template = $("#item-template");
var el = $(this.el);
this.collection.each(function(model){
var html = template.tmpl(model.toJSON());
el.append(html);
});
}
});
 
var items = new ItemCollection([
{id: 1, name: "item 1"},
{id: 2, name: "item 2"},
{id: 3, name: "item 3"}
]);
 
var view = new ItemListView({collection: items});
view.render();
$("#showIt").html(view.el);
2.html
HTML
1 2 3
<script id="item-template" type="text/x-jquery-tmpl">
<li><a href="#" data-id="${id}">${name}</a></li>
</script>
2.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
Item = Backbone.Model.extend({});
ItemCollection = Backbone.Collection.extend({
model: Item
});
 
ItemListView = Backbone.View.extend({
tagName: "ul",
events: {
"click a": "clicked"
},
clicked: function(e){
e.preventDefault();
var id = $(e.currentTarget).data("id");
var item = this.collection.get(id);
var name = item.get("name");
alert(name);
},
render: function(){
var template = $("#item-template");
var el = $(this.el);
this.collection.each(function(model){
var html = template.tmpl(model.toJSON());
el.append(html);
});
}
});
 
var items = new ItemCollection([
{id: 1, name: "item 1"},
{id: 2, name: "item 2"},
{id: 3, name: "item 3"}
]);
 
var view = new ItemListView({collection: items});
view.render();
$("#showIt").html(view.el);
3.html
HTML
1 2 3
<script id="item-template" type="text/x-jquery-tmpl">
<a href="#">${name}</a>
</script>
3.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
Item = Backbone.Model.extend({});
ItemCollection = Backbone.Collection.extend({
model: Item
});
 
ItemListView = Backbone.View.extend({
tagName: "ul",
initialize: function(){
_.bindAll(this, "renderItem");
},
renderItem: function(model){
var itemView = new ItemView({model: model});
itemView.render();
$(this.el).append(itemView.el);
},
render: function(){
this.collection.each(this.renderItem);
}
});
 
ItemView = Backbone.View.extend({
tagName: "li",
events: {
"click a": "clicked"
},
clicked: function(e){
e.preventDefault();
var name = this.model.get("name");
alert(name);
},
 
render: function(){
var template = $("#item-template");
var html = template.tmpl(this.model.toJSON());
$(this.el).append(html);
}
});
 
var items = new ItemCollection([
{id: 1, name: "item 1"},
{id: 2, name: "item 2"},
{id: 3, name: "item 3"}
]);
 
var view = new ItemListView({collection: items});
view.render();
$("#showIt").html(view.el);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.