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

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 un objeto separado (modelo de subvista, supongo) para cada aplicación "vista" y alterno entre ellas 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 direcciones que usted podría ir con éste.

Una opción es llamar ko.applyBindings con vista distintos modelos contra los elementos DOM separadas 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, usted quiere asegurarse de que los elementos no son antepasados ​​de cada otra (no quieren obligar a nada dos veces)

otra opción es utilizar sub modelos de vista:

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

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

ko.applyBindings(viewModel); 

En este método, utilizaría los enlaces with 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 dar a sus "puntos de vista" un poco de la estructura 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/