knockout.js - for - knockoutjs variables

Ejemplo de patrón knockoutjs para aplicaciones de múltiples vistas

Question

Estoy construyendo una aplicación que contiene dos vistas complejas, significativamente diferentes (aunque con algunos componentes compartidos). Una vista permite al usuario ejecutar consultas y ver los resultados de búsqueda, y la otra vista ofrece una visión general de la actividad reciente. Un ejemplo relacionado podría ser una aplicación PIM que tiene una pantalla de correo electrónico y una pantalla de contactos. Los dos conjuntos de operaciones son bastante diferentes y, sin embargo, también hay similitudes estructurales entre ellos. Al construir mi aplicación, comencé con la vista de resultados de búsqueda. Ahora necesito crear el segundo y me pregunto cuáles son las mejores prácticas para organizar el código.

¿Creo crear un objeto separado (modelo de subvista, supongo) para cada aplicación "vista" y alternar entre ellos con enlaces if / ifnot? Una característica común entre las vistas es que cada una tiene una lista de objetos desplazable, filtrable y paginable. ¿Debo tratar de restar importancia a las diferencias entre las listas para que pueda tener una UI de ordenación / filtro común, o simplemente creo dos interfaces paralelas que solo comparten mis enlaces personalizados?

Gracias,

Gene

Answer 1

Hay algunas instrucciones que podría seguir con este.

Una opción es llamar a ko.applyBindings con distintos modelos de vista frente a elementos de DOM independientes como:

var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };

ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));

http://jsfiddle.net/9abgxn8k/

En este caso, querrás asegurarte de que los elementos no sean ancestros entre sí (no quieras vincular nada dos veces)

Otra opción es usar modelos de sub-vista:

var subModelA = { name: "Bob" };
var subModelB = { price: 50 };

var viewModel = {
  subModelA: { name: "Bob" },
  subModelB: { price: 50 }
};

ko.applyBindings(viewModel);

En este método, luego usaría with enlaces en las áreas que desea mostrar con cada modelo de vista. Puede controlar la visibilidad con indicadores en los submodelos o en el modelo superior.

Otra opción que me gusta es darle un poco de estructura a tus "vistas" y hacer algo como:

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};

var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};


var viewModel = {
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]),
    selectedView: ko.observable()    
};

ko.applyBindings(viewModel);

http://jsfiddle.net/rniemeyer/PctJz/