Pregunta

Durandal:¿Cuál es la forma correcta de pasar datos (parámetros) entre Viewmodels si es posible (sin tratar con el backend)?

digamos que tengo 2 vistas descripción general y detalles Quiero que el usuario haga clic en un elemento de la lista de descripción general toma la identificación de ese elemento y se la pasa a detalles Viewmodel para poder empezar a trabajar con esa identificación.

gracias por la ayuda

¿Fue útil?

Solución

Pista:probablemente desee el enfoque basado en rutas.El otro es para completar.

Enfoque basado en modelos de vistaEn general yo diría:cree un módulo, llamémoslo datos e inyecte el módulo de datos en ambos modelos de vista.Luego, la descripción general puede establecer el atributo clickedElementId en el módulo de datos, y los detalles pueden leer el valor del atributo y usarlo (incluso podría hacer que el atributo sea observable para que los detalles sean notificados cuando la descripción general cambie el atributo).Este enfoque funciona cuando ambos modelos de vista pueden estar activos al mismo tiempo, mientras que mi siguiente solución (preferida) solo funciona si enruta de una vista a la otra, por lo que nunca están activos al mismo tiempo.Este enfoque 'basado en modelo de vista' es algo que uso personalmente para datos comunes en la aplicación (también puede usar el modelo de vista del shell de su aplicación para este tipo de atributos).

Enfoque basado en rutasParece ser lo que le gustaría hacer dada su descripción de la situación.Las rutas definidas pueden tomar parámetros (opcionales).Supongamos que ahora tiene la ruta 'detalles', puede cambiarla a 'detalles/:id' (acepta un parámetro de identificación, no opcional) o 'detalles(/:id)' (acepta un parámetro de identificación, opcional).

Necesita un controlador de eventos similar a este para hacer clic en un elemento de la lista:

overview.onElementClick = function (e) {
    var element = this, // The idea is that you need the clicked element for the next line of code
        koDataForElement = ko.dataFor(element);

    router.navigate('details/' + koDataForElement.id);
}

ko.dataFor es una buena ayuda para obtener los datos del modelo de vista que están vinculados al elemento que le pasa, en este caso su elemento de lista.Al hacer clic, desea navegar a los detalles y pasar la identificación del elemento en el que se hizo clic a los detalles.Ese código anterior hace todo eso.

Ahora la función de activación de su modelo de vista de detalles debería verse así:

details.activate = function (id) {
    // id is the parameter we defined for the route. Now you are free to leverage it inside your second view!
};

Editar:Consejo adicional:También puedes activar la ruta con id directamente desde un enlace.Supongamos que todo el elemento de su lista está envuelto en una etiqueta de anclaje, podría hacer algo como esto:

<div data-bind="foreach: myListOfElements">
    <a href="#" data-bind="attr: { href: '#details/' + id }">listElementGoesHere</a>
</div>

¡Buena suerte!Si aún no está claro, házmelo saber.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top