problemas de rendimiento/plantilla cuando se usa requirejs con JQuery, jQuery Mobile, Knockout y Sammy para crear una aplicación estructurada con plantillas externas

jquery-mobile knockout.js

Question

Tengo una configuración para una aplicación de prueba que incluye require.js, jQuery, jQueryMobile (jqm), knockout y sammy

require.js cargas en jqm, knockout y sammy

en la página principal de la aplicación utilizo sammy para cargar en viewModels knockout. estos viewModels la carga en las plantillas ..

para mostrar el código ...

requerir página:

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

});

página de productos

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

     });

}
});

productos 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>

Hay un par de problemas

1. se supone que sammy está cargado en ese orden porque de vez en cuando cuando lo actualizo arroja un error de que sammy o jquery no están definidos debido a que la carga es demasiado lenta, estoy adivinando

2. en la página de productos si alguien lo va desde la página de inicio, carga bien porque se ha llamado al jQueryMobile changePage, pero si un usuario luego actualiza esa página, la lista que ha venido de JSON pierde todo su estilo.

Creo que esto se debe a la forma en que renderizo la página desde la plantilla y luego tengo que hacer la lista, pero no puedo pensar en otra forma de hacerlo.

así que estaba pensando (probablemente no es la mejor solución), pero ¿hay alguna manera de forzar una página? ¿Cambiar una actualización? o alguien tiene una mejor solución?

3.

¿Es esta la mejor manera de llamar a una plantilla externa / hay una mejor manera de agregar la plantilla al cuerpo? Realmente creo que el tiempo que tarda en hacer eso es lo que causa los problemas de estilo y también cuando agrego el siguiente nivel de productos, comienza a renderizarlos en esta página antes de pasar a la siguiente ...

Estoy luchando por encontrar la mejor manera de cargar plantillas externas con knockout y requirejs. Quiero mantener las plantillas en HTML para que otros en el equipo puedan editarlas con la suficiente facilidad y para darles una estructura.

esta demostración se puede ver aquí

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

Realmente agradezco cualquier ayuda

Answer 1

Mirando tu demo, puedo sugerir algunas cosas para probar.

1. En main.js elimine la dependencia de jqm-config y agréguelo a app.js De esta forma, siempre se garantizará que configuró su configuración móvil de jquery antes de ejecutar cualquier cosa en app.js
2. Asegúrese de que su llamada a ko.applyBindings() esté envuelta en una construcción .ready() .
3. Cada vez que cambia de página, vuelve a vincular el knockout al mismo nodo. Esa no es la mejor práctica y puede dar lugar a un comportamiento extraño. Si vas a hacer eso, asegúrate de desactivar las encuadernaciones primero. Mira cómo aquí .

Incluso con todos esos artículos arreglados, no estoy seguro de que la forma en que vaya sobre las cosas funcione. Puede ser mejor que cargue todo el HTML por adelantado y vincule todas las páginas a un modelo de vista principal con subviewmodels.