gulp - Jquery mobile not rendering after injecting precompiled handlebars -
the environment
building app in phonegap , using handlebars templating. jquery-mobile in mix provide widgets , out of box themes. templates packed gulp build file , rendered onto page through separate js files.
the route
the file structure
/- --|templates/ ----|login.hbs/ --|www/ ----|js/ ------|index.js ------|render/ --------|loginview.js the template before packing, login.hbs:
<div class="app" data-role="page"> <div data-role="header"> <h1>index page</h1> </div> <div data-role="main" class="ui-content"> </div> <div data-role="footer"> <h1>title on page</h1> <button id="login-btn" class="ui-btn ui-icon-plus ui-btn-icon-left">login page</button> </div> </div> the file handles rendering, loginview.js
var loginview = function() { this.initialize = function() { this.el = $('<div data-role="page"/>'); this.el.on('click', '#index-btn', this.renderindex); }; this.render = function() { this.el.html(loginview.template()); return this; }; this.renderindex = function() { console.log('button click'); $('body').html(new indexview().render().el); } this.initialize(); } loginview.template = app.templates.login; the place file called index.js
var app = { bindevents: function() { document.addeventlistener('deviceready', this.ondeviceready, false); }, ondeviceready: function() { app.receivedevent(); }, receivedevent: function() { console.log('received event!'); $('body').html(new loginview().render().el); $('body').trigger('create'); }, initialize: function() { var self = this; this.bindevents(); } }; the question
is 1 jquery not loading on handlebars inject. maybe i'm not understanding method needs called. jquery works when rendering disabled , simple html present on page... once rendering wired again: blank page.
i've tried several different places far:
- in this.render part of loginview
- in place now
- tried both 'create' , 'pagecreate'
- used id of rendered page instead of body
i've moved <div data-role="page"> around bit.
