Question

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

Answer 1

@Nithalia

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

使用jQueryMobile和Marionette加载模板

1 个答案: