jquery - 使用 jquerymobile requirejs 和骨干不显示在 windows phone 7 Lumia

Question

所以我有一个使用 requirejs 主干的非常简单的两页应用程序

结构非常简单

在索引页面上调用 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 手机之外的所有设备 - 我需要让它工作

目前只显示白屏，请参见此处

http://demo.stg.brightonconsulting.net.au/templates/tests/mobileWebsiteBbJqm/