Skip to content

@derickbailey /1.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
backbone.js: how to get the model of the clicked html element
<script id="item-template" type="text/x-jquery-tmpl">
<li><a href="#">${name}</a></li>
</script>
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);
<script id="item-template" type="text/x-jquery-tmpl">
<li><a href="#" data-id="${id}">${name}</a></li>
</script>
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);
<script id="item-template" type="text/x-jquery-tmpl">
<a href="#">${name}</a>
</script>
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.