In my previous example, I used an eval to load a page controller from the jQuery.fn name space. Here is a much better version of that code which has the added benefit of allowing access to the instance of my controller:
1 2 3 4 5 6 7 8 | If ( typeof MyApp.Pages[pageName] === 'function') { // don't really need the element passed here per this example's controller, will check if needed. pageInstance = new MyApp.Pages[pageName]($('body')); pageInstance.view.done( function ( htmlOutput ) { $('body').append(htmlOutput); $('#' + pageName).page(); $.mobile.changePage( $('#' + pageName) ); } |
On the controller side, the init method becomes much simpler than I had originally written:
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 | /** * @class MyApp.Pages.Frontpage */ $.Controller('MyApp.Pages.Frontpage', /** @Static */ { defaults : { itemsPerPage : 20, currentPage : 1 }, pluginName: 'frontpage' }, /** @Prototype */ { /** * Downloads and renders a full page of blog posts */ init : function() { this.view = $.View("my_app/pages/views/frontpage.ejs", { items: MyApp.Models.BlogPost.findAll({ start : (this.options.currentPage-1) * this.options.itemsPerPage, count : this.options.itemsPerPage }) }); } } ); // End of controller |
 have any thoughts about this.