Skip to content

Instantly share code, notes, and snippets.

@Alos
Created April 28, 2013 03:18
Show Gist options
  • Save Alos/5475734 to your computer and use it in GitHub Desktop.
Save Alos/5475734 to your computer and use it in GitHub Desktop.
Trying to refresh a view when the collection changes.
window.FilteredItemListView = Backbone.View.extend({
initialize : function(options) {
console.log("Initializing filtered item list view");
this.collection = options.itemCollection;
this.filter = options.filter;
this.collection.bind("reset", this.render, this);
this.render();
},
render: function() {
console.log("Rendering filtered item list view");
console.log("This filter");
console.log(this.filter);
console.log("This collection");
console.log(this.collection);
//Simple filter with just an input field and a button
var filterTemplate = _.template(' \
<form> \
<legend>Busqueda</legend> \
<div class="input-append"> \
<input id="startsWithInput" name="startsWithInput" type="text" value= "<%= filter.startsWith %>" class="span2" /> \
<a href="#" class="btn search">Search</a> \
</div> \
</form>');
$(this.el).append(filterTemplate({
"filter": this.filter.toJSON()
}));
//Paints the list
$(this.el).append('<br /><br /><br /><legend>Items</legend><br/><table id="itemTable" class="table table-striped table-bordered table-hover"><thead><tr><th>name</th><th>description</th></thead><tbody></tbody></table> <form><div class="form-actions"><a href="#" class="btn previous">Previous</a><a href="#" class="btn next">Next</a></div></form>');
_.each(this.collection, function(data) {
$('#itemTable', this.el).append(new FilteredItemListItemView({model : data}).render().el);
}, this);
return this;
},
events:
{
"click .next" : "goNext",
"click .previous" : "goPrevious",
"click .search" : "search"
},
search : function(){
var paramter = $("#startsWithInput").val();
console.log("searching..." + paramter);
event.preventDefault();
//fetchWithFilter just creates a URL and then does a this.fetch();
$.when(this.collection.fetchWithFilter(paramter)).then(function(){
console.log("done!");
});
},
....
@Alos
Copy link
Author

Alos commented Apr 28, 2013

This is the console.log:

Rendering filtered item list view
FilteredItemListView.js:13This filter
FilteredItemListView.js:14
Object
FilteredItemListView.js:15This collection
FilteredItemListView.js:16
Object
FilteredItemListView.js:51searching...c
ItemModel.js:88loading page with filter...
ItemModel.js:10Initializing item model
FilteredItemListView.js:55done!
FilteredItemListView.js:56[
Object
]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment