注入预编译车把后Jquery mobile无法呈现

Question

环境

在PhoneGap中构建应用并使用Handlebars进行模板化。 Jquery-mobile可以提供小部件和一些开箱即用的主题。模板通过gulp打包到构建文件中，并通过单独的JS文件呈现到页面上。

路线

文件结构

/-
--|templates/
----|login.hbs/
--|www/
----|js/
------|index.js
------|render/
--------|LoginView.js

包装前的模板，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>

处理渲染的文件，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;

此文件名为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();
    }
};

问题

与Jquery not loading on handlebars inject非常相似。但也许我还没有完全理解需要调用此方法的位置。目前，Jquery在禁用渲染并且页面上出现简单的html时工作......再次连接渲染：空白页。

到目前为止，我已尝试了几个不同的地方：

• 在LoginView的this.render部分
• 在现在的地方
• 试图创造＆＃39;和＆＃39; pagecreate＆＃39;
• 使用呈现页面的id而不是body

我也将<div data-role="page">移动了一下。