Ich habe ein Setup für eine Test-App, die require.js, jQuery, jQueryMobile (jqm), knockout und sammy enthält

require.js lädt in jqm, knockout und sammy

Auf der App-Hauptseite verwende ich sammy, um Knockout-ViewModels zu laden. Diese Ansicht modelliert das Laden in die Vorlagen.

um den Code zu zeigen ...

Benötige Seite:

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

});

Produktseite

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

     });

}
});

produkte html (text2.html)

<div data-role="page" data-theme="c" class="ui-page" id="products">

<div data-role="header" data-position="fixed">
    <h1>Products</h1>
    <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>

<div data-role="content">   
        <ul data-role="listview" data-inset="true"  data-bind="foreach: products" >

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


        </ul>

</div>

Es gibt einige Probleme

soll sammy in dieser reihenfolge geladen werden, da ab und zu beim aktualisieren ein fehler auftritt, dass sammy oder jquery aufgrund zu langsamen ladens nicht definiert ist

Wenn jemand von der Homepage auf die Produktseite zugreift, wird sie in Ordnung geladen, da die jQueryMobile-Änderungsseite aufgerufen wurde. Wenn ein Benutzer diese Seite dann aktualisiert, verliert die von JSON stammende Liste ihre gesamte Formatierung.

Ich denke, das liegt an der Art und Weise, wie ich die Seite aus der Vorlage rendere und dann die Liste erstellen muss, aber ich kann mir keine andere Art und Weise vorstellen, dies zu tun.

Also habe ich nachgedacht (wahrscheinlich nicht die beste Lösung), aber gibt es eine Möglichkeit, einen Seitenwechsel bei einer Aktualisierung zu erzwingen? oder hat jemand eine bessere lösung?

3.

Ist dies der beste Weg, um eine externe Vorlage aufzurufen / gibt es einen besseren Weg, um die Vorlage an den Body anzuhängen? Ich denke wirklich, dass die Zeit dafür die Styling-Probleme verursacht und auch wenn ich die nächste Produktstufe hinzufüge, werden sie auf dieser Seite gerendert, bevor zur nächsten übergegangen wird.

Ich habe Mühe, den besten Weg zu finden, um externe Vorlagen mit Knockout und Requiredjs zu laden. Ich möchte die Vorlagen in HTML halten, damit andere im Team sie leicht genug bearbeiten und eine Struktur geben können.

Diese Demo ist hier zu sehen

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

Wirklich dankbar für jede Hilfe