-1

マリオネットで JQM を使用しようとしていますが、問題に直面しています。

問題: data-role="page" と "content" を持つ空の div を持つ index.html ページがあります。JQM スタイルのラベルとボタンを 1 つだけ持つアンダースコア テンプレート ファイルがあります。

これまでのところ、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 に答える