-1

我正在尝试将 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;
});
4

1 回答 1

-1

@尼塔利亚

你可以看看jquerymobile-marionette。在那里，为了模拟 JQM 页面，使用了 Backbone.Marionette.Layout。您可以看到模板是如何加载和呈现的。

于 2013-05-27T17:33:30.043 回答