У меня есть настройки для тестового приложения, которое включает require.js, jQuery, jQueryMobile (jqm), нокаут и Сэмми

require.js загружает в JQM, нокаут и Сэмми

На главной странице приложения я использую Сэмми для загрузки в нокаут ViewModels. Эти view моделирует загрузку в шаблонах.

так чтобы показать код ...

требуется страница:

require.config({
    jquery:     'vendor/jqm/jquery_1.7_min',
    jqm:     'vendor/jqm/jquery.mobile-1.1.0', 
    knockout: 'vendor/knockout/knockout-2.2.0',
    sammy : 'vendor/sammy/sammy',
    text:       'vendor/require/text',
views:    '../views',
templates:  '../templates'
}

});

define(['app','jqm-config'], function(app) {
   $(document).ready(function() {
  console.log("DOM IS READY");
});    

});

app.js

define(['jquery','knockout', 'sammy','views/home/home', 'views/products/products', 'jqm'],
function($, ko, sammy, appViewModel, productsViewModel) {

var self = this;
self.goHome = function() {
    ko.applyBindings(new appViewModel());
};

self.goProducts = function() {
    ko.applyBindings(new productsViewModel());
};

 Sammy(function() {
    this.get('#home', function() {
       self.goHome(); 
    });

    this.get('#products', function() {
        self.goProducts();
    });

    this.get('', function() {
       self.goHome(); 
    });

 }).run(); 

});

страница продуктов

define(['jquery', 'knockout','text!templates/test2.html', 'jqm'], 
function($, ko, productsViewTemplate){


function ProductType(id, name) {
var self = this;
self.id = id;
self.name = name;
}

return function productsViewModel() {

  $('body').append(productsViewTemplate); 
  var self = this;
  self.products = ko.observableArray(); 

    var jqxhr = $.getJSON("data/product.json")
    .success(function(data, status, xhr) { 
            self.products.removeAll();    
        $.each(data.data.productTypeList, function(i,item){
           self.products.push(new ProductType(i, item.longName));

        })        
      })
     .error(function() { alert("error"); })
     .complete(function() {

         $.mobile.changePage( '#products', { transition: "pop"});

     });

}
});

html продуктов (text2.html)

    Products
    <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>


   
        

          
            <a data-bind="attr:{href:'#products/list/' + id}, text: name"></a>
          


        

Есть пара проблем

sammy должен быть загружен в таком порядке, потому что время от времени, когда я обновляю его, он выдает ошибку, что sammy или jquery не определены из-за слишком медленной загрузки, которую я предполагаю

на странице продуктов, если кто-то переходит с домашней страницы, он загружается нормально, потому что jQueryMobile changePage был вызван, но если пользователь затем обновляет эту страницу, список, пришедший из JSON, теряет все свои стили.

Я думаю, что это связано с тем, как я отрисовываю страницу из шаблона, а затем должен составить список, но я не могу придумать другой способ сделать это.

так что я думал (вероятно, не лучшее решение), но есть ли способ заставить PageChange обновить? или кто-нибудь получил лучшее решение?

3.

Это лучший способ для вызова внешнего шаблона / есть ли лучший способ добавить шаблон в тело. Я действительно думаю, что время, которое требуется для этого, вызывает проблемы со стилем, а также, когда я добавляю продукты следующего уровня, он начинает отображать их на этой странице, прежде чем перейти к следующему.

Я изо всех сил пытаюсь найти лучший способ загрузки во внешние шаблоны с нокаутом и requirejs. Я хочу сохранить шаблоны в HTML, чтобы другие члены команды могли их легко редактировать и создавать структуру.

это демо можно увидеть здесь

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

Действительно ценю любую помощь