我正在尝试将 JQM 与 Marionette 一起使用，但遇到了一个问题。
问题：我有一个 index.html 页面，其中包含带有 data-role="page" 和 "content" 的空 div。我的下划线模板文件只有一个 JQM 样式的标签和按钮。
到目前为止，我已经成功地使用 Marionette.ItemView 和 Marionette 区域加载了我的模板。一切都很好，比如加载所有必需的脚本，如 jQuery、JQM、Backbone.Marionette，加载 jQueryMobile css 等。视图以及标签和按钮都成功渲染。
但问题是我在模板中为 div 设置的主题没有反映，甚至按钮或标签 UI 也不是 JQM 提供的。
我认为在加载模板后我应该刷新页面。但是我应该在我的代码中在哪里以及如何做到这一点。我尝试了很多代码，但没有任何效果。
这是 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Index</title>
<!-- data-main attribute tells require.js to load config.js after require.js loads. -->
<script data-main="../js/apps/config" src="../js/ext_libs/require.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<header id="header" data-role="header"></header>
<div id="main" class="container-fluid" data-role="content"></div>
<footer data-role="footer" class="footer">
</footer>
</div>
</body>
</html>
这是我的 index_view
define([ "marionette", "templates" ], function( Marionette, templates ) {
console.log("Success..Inside Index View.");
var IndexView = Marionette.ItemView.extend({
template : templates.index_body({title: 'Worrrrrld', btn_submit: 'Submit'})
});
return IndexView;
});
和模板
<div data-theme="b" id="index_view">
<label><%= title %></label>
<input type="submit" value=<%= btn_submit %> />
</div>
我的 App.js 文件
define([ "jquery",
"underscore",
"backbone",
"marionette",
"index_view",
"header_view" ], function($,_,
Backbone, Marionette, IndexView, HeaderView) {
'use strict';
console.log("Success...Inside App");
console.log("Success..Libraries loaded successfully.");
var app = new Marionette.Application();
console.log("Success..App Object Got Created.");
app.addRegions({
header : '#header',
main : '#main',
footer : '#footer'
});
console.log("Success..Regions Added");
app.addInitializer(function() {
console.log("Success..Creating Header View Object.");
app.header.show(new HeaderView());
console.log("Success..Creating Index View Object.");
app.main.show(new IndexView());
});
app.on('initialize:after', function() {
Backbone.history.start();
});
$(document).on('pagebeforeshow', '#index', function(){
console.log("Success..I am triggering event");
$('[data-role="content"]').trigger('create');
});
console.log("Success..Returning App Object.");
return app;
});