Created
June 12, 2012 17:42
-
-
Save tvpmb/2918966 to your computer and use it in GitHub Desktop.
pseudo code for running a complex bb "page"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 | |
}, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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