Search code examples
jqueryjquery-mobilebackbone.jsmarionette

Loading templates using jQueryMobile with Marionette

I am trying to use JQM with Marionette but facing an issue.

Problem: I have an index.html page with empty divs with data-role="page" and "content". I have my underscore template file having just one label and button in JQM style.

So far I have succeeded in loading my template using Marionette.ItemView and Marionette regions. Everything's working great like loading of all required scripts like jQuery, JQM, Backbone.Marionette, loading of jQueryMobile css etc. And the view gets rendered successfully, along with label and the button.

But the problem is the theme which I set in my template to the div is not reflected and even the button or label UI is not that which is provided by JQM.

I think that after loading of templates I should refresh the page. But where and how I should do it in my code. I have tried lot of code but nothing is working.

This is 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>

This is my 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;
});

And the template

<div data-theme="b" id="index_view">
<label><%= title %></label>
<input type="submit" value=<%= btn_submit %> />
</div>

My App.js file

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;
});
Solution

  • @Nithalia

    You can take look at jquerymobile-marionette. In there, to model JQM page, Backbone.Marionette.Layout is used. You can see how template is loaded and rendered.