Skip to content

Instantly share code, notes, and snippets.

@tvpmb
Created June 12, 2012 17:42
Show Gist options
  • Save tvpmb/2918966 to your computer and use it in GitHub Desktop.
Save tvpmb/2918966 to your computer and use it in GitHub Desktop.
pseudo code for running a complex bb "page"
// now that we have the initial interface built, lets run a search
HeaderView = Backbone.Views.extend({
template: 'template/path/here',
events: {
"click #searchButton": "search"
},
search: function(e) {
// set the search results collection's url
app.searchCollection.url = '/path/to/rest?q='+$('#searchBox').val();
app.searchFetch = app.searchCollection.fetch();
app.searchFetch.done(function() {
// this only executes when the data comes back.
Tab1View.collection = app.searchCollection;
Tab1View.render();
});
},
tabSwitch2: function(e) {
// handle a tab switch -- works just like search, but change the collection and render
},
tabSwitch3: function(e) {
// same as the others, just change the data again
},
});
// before you do anything get your data in order (and fetched if need be)
app.searchModel = new Backbone.Model();
app.searchCollection = new Backbone.Collection();
app.menuModel = new Backbone.Model()
app.menuCollection = new Backbone.Collection();
// this one is a bit special. I like to use JQ deferreds to know when data is available, rather then bind to a collection reset.
var menuFetch = menuCollection.fetch();
// main route...
index: function() {
// get the views you need to make the page
// keep in mind, that all views should be able to be rendered WITHOUT data...ie: every view
// should have model: new Backbone.Model(), so that they can render, and not stop page execution
HeaderView;
MenuView;
ContentView;
Tab1View;
Tab2View;
Tab3View;
// render everything out to the page
}
Tab1View = Backbone.Views.extend({
template: 'template/no-results.html', // starts out with no results
// no model here because this one gets the collection
initialize: function() {
if (this.collection) {
// when this loads, there won't be data. don't try to do anything except show a no-results template
// but if we have a collection, lets render it!
this.template = 'template/results-list.html';
this.render();
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment