Am building a mobile web app with jquery mobile, backbone, and require.js to make it modular.
I have an html page that has this;
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>DoIt</title>
<link href="jqm/jquery.mobile-1.2.0.css" rel="stylesheet">
<script charset="utf-8" src="jqm/jquery-1.7.2.min.js"></script>
<script charset="utf-8" src="jqm/jquery.mobile-1.2.0.min.js"></script>
<script charset="utf-8" src="libs/require.js" data-main="app"></script>
</head>
my app.js file looks like this
//Require.js configuration
require.config({
paths: {
'underscore': 'libs/underscore-min',
'backbone': 'libs/backbone-min',
'text': 'libs/text'
},
shim: {
'backbone': {
deps: ['underscore'],
exports: 'Backbone'
}
}
});
require(['backbone', 'views/main'], function (Backbone, AppView) {
'use strict';
var view = new AppView();
$(document).bind('pagecreate', function () {
view.render();
});
});
and this the template for the view
<script type="text/html" id="app-view-tmpl">
<div id="task-creator">
<input type="text" id="task" placeholder="Enter a task">
<button data-role="button" data-theme="b">
Create task
</button>
</div>
</script>
I using the ‘pagecreate’ event to trigger the rendering of the view.
The view doesnt render but other details i set to be logged to the console on initialization of the view are logged.
Am doing something wrong?
I know little about backbone.js but are you “refreshing” your widgets after building them?
http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html
$("#myListView").listview("refresh");or
$("#myButton").button("refresh");This should be part of your
pagecreatelogic. It would be helpful to get some additional details on your templates.