Loading templates using jQueryMobile with Marionette

Question

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

http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content/14550417#14550417 — Gajotres, May 27 '13 at 16:51
Thanks for the reply..but can you please advice where should i place the code $(document).on('pagebeforeshow', '#index', function(){ // Enhance new select element $('[data-role="content"]').trigger('create'); }); — Rachna, May 28 '13 at 09:27
@Gajotres I tried placing in my app.js script as shown above. But didn't work please tell me I am very new in programming with Jquery and Marionette — Rachna, May 28 '13 at 09:28

Ming Chan · Accepted Answer · 2013-06-15T15:41:10.363

-1

@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.

edited Jun 15 '13 at 15:41

answered May 27 '13 at 17:33

Ming Chan

1,938
11
21

Thanks for reply.. but i have already referred that link..the difference is just that i am not using JQM Router apart from that everything is same but still not working...Please tell me some other options. – Rachna May 28 '13 at 04:52
can you post your config.js? Also in your index_view, it loads 'templates' where is coming from? – Ming Chan May 29 '13 at 03:40
Hello Ming.. As suggested by you i referred that code you specified. It working perfect but can you please tell me that the approach used in helper.js is it Backbone code right..its not completely marionette...Is it at low level. I tried to implement layouts but now the templates which were visible earlier, now they vanished...I have posted my complete code on this location please check and let me know..ASAP – Rachna May 29 '13 at 04:50
link to my code https://github.com/rachnakhokhar/jqm_requirejs_marionette_demo.git – Rachna May 29 '13 at 04:51
Just forked yours. few small changes to your code and posted a pull – Ming Chan May 30 '13 at 02:30

Loading templates using jQueryMobile with Marionette

1 Answers1