だから私はrequirejsバックボーンを使用して非常に単純な2ページのアプリを持っています
構造はとてもシンプルです
index ページでの require の呼び出し
含まれているライブラリのリスト
jqmルーティングがオフになった後のルーターページへの呼び出し
jqmconfig
define(['jquery'], function($){
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
// Remove page from DOM when it's being replaced
$('div[data-role="page"]').live('pagehide', function (event, ui) {
$(event.currentTarget).remove();
});
});
});
ルーターページ
define(['jquery', 'underscore', 'backbone','views/home/home',
'models/products/productCollection',
'views/products/productTypes',
'jqm'],
function($, _, Backbone,HomeView,ProductsType,ProductListView ) {
var AppRouter = Backbone.Router.extend({
//define routes and mapping route to the function
routes: {
'': 'showHome', //home view
'home': 'showHome', //home view as well
'products/productTypes' : 'showProductTypes',
'products/productList/:ID' : 'showProductList',
'products/productList/:ID/' : 'showProduct',
'maps/search' : 'showMapSearch',
'*actions': 'defaultAction'
},
initialize:function () {
// Handle back button throughout the application
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
//this.products = new Products();
},
cachedProductTypes: null,
productType : {}, //this is not adding
products : {}, //this is not adding
getProducts:
function(callback)
{
if (this.cachedProductTypes !== null) {
return callback(this.cachedProductTypes);
}
var self = this;
$.getJSON('data/product.json',
function(data)
{
self.cachedProductTypes = data;
callback(data);
}
);
},
parseResponse : function(data) {
result = { prodTypes: [], products: [] };
var type;
var types = data.data.productTypeList;
var product;
var i = types.length;
var tmpItem;
$(types).each(function(index, element) {
});
$.each(types, function(i,item){
//create book for each item and then insert into the collection
tmpItem={
productID:i,
id:item.id,
name:item.name,
longName:item.longName,
ordering:item.ordering
};
result.prodTypes.push(tmpItem);
});
this.productType = result.prodTypes;
this.products = result.products;
},
defaultAction: function(actions){
this.showHome();
},
showHome:function(actions){
// will render home view and navigate to homeView
var homeView=new HomeView();
homeView.render();
this.changePage(homeView, 'fade');
},
showProductTypes:function(){
var self = this;
//show spinner
this.getProducts(
function(data)
{
self.parseResponse(data);
var productTypesArray = self.productType;
var productList=new ProductsType(productTypesArray);
console.log(productTypesArray);
var productListView=new ProductListView({collection:productList});
productListView.bind('renderCompleted:ProductsType',self.changePage,self);
productListView.update();
}
);
},
showMapSearch:function(){
var self = this;
//run your code
},
changePage:function (view, transition) {
//add the attribute 'data-role="page" ' for each view's div
console.log("pagechanged");
if (transition != "slidefade") {
transition = "pop";
}
view.$el.attr('data-role', 'page');
$('.ui-page').attr('data-role', 'page');
//append to dom
$('body').append(view.$el);
if(!this.init){
$.mobile.changePage($(view.el), {changeHash:false, transition: transition});
}else{
this.init = false;
}
}
});
$(document).ready(function () {
console.log('App Loaded');
app = new AppRouter();
Backbone.history.start();
});
return AppRouter;
});
これは、Windows Phone を除くすべてのデバイスでうまく機能します。これを機能させる必要があります。
現在、白い画面しか表示されていません ここを参照してください
http://demo.stg.brightonconsulting.net.au/templates/tests/mobileWebsiteBbJqm/