KnockoutJS - Varios modelos de vista en una sola vista

Estoy pensando que mi aplicación se está haciendo bastante grande ahora, demasiado grande para manejar cada vista con un solo ViewModel.

Así que me pregunto lo difícil que sería crear varios ViewModels y cargarlos todos en una sola vista. Con una nota que también necesito ser capaz de pasar X ViewModel datos en Y ViewModel datos para que los ViewModels individuales necesitan ser capaces de comunicarse entre sí o al menos ser conscientes de los demás.

Por ejemplo tengo un <select> desplegable, ese select desplegable tiene un estado seleccionado que me permite pasar el ID del elemento seleccionado en el <select> a otra llamada Ajax en un ViewModel separado....

Cualquier punto sobre el tratamiento de numerosos modelos de vista en una sola vista apreciada:)

Author: Richard Nalezynski, 2012-02-15
Source

5 answers

Si todos necesitan estar en la misma página, una manera fácil de hacerlo es tener un modelo de vista maestro que contenga una matriz (o lista de propiedades) de los otros modelos de vista.

masterVM = {
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}

Entonces su masterVM puede tener otras propiedades si es necesario, para la página misma. La comunicación entre los modelos de vista no sería difícil en esta situación, ya que podría transmitir a través del masterVM, o podría utilizar el $parent / $root en enlaces, o algunas otras opciones personalizadas.

 146
Author: John Papa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-01 18:07:19

Knockout ahora admite la unión de modelos múltiples. El método ko.applyBindings() toma un parámetro opcional: el elemento y sus descendientes al que se activará el enlace.

Por ejemplo: 

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

Esto restringe la activación al elemento con ID someElementId y sus descendientes.

Ver documentación para más detalles.

 282
Author: sanatgersappa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-26 09:55:49

Esta es mi respuesta después de completar un proyecto muy grande con muchos ViewModels en una sola vista.

Vista html 

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="container1">
        <ul>
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <div id="container2">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/knockout-3.0.0.js"></script>
    <script src="js/DataFunction.js"></script>
    <script src="js/Container1ViewModel.js"></script>
    <script src="js/Container2ViewModel.js"></script>

</body>
</html>

Para esta vista estoy creando 2 modelos de vista para id=container1 e id=container2 en dos archivos javascript separados.

Container1ViewModel.js 

function Container1ViewModel()
{
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

}

Container2ViewModel.js 

function Container2ViewModel() {
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("XYZ");
    self.myItems.push("PQR");

}

Luego, después de estos 2 viewmodels se registran como viewmodels separados en DataFunction.js 

var container1VM;
var container2VM;

$(document).ready(function() {

    if ($.isEmptyObject(container1VM)) {
        container1VM = new Container1ViewModel();
        ko.applyBindings(container1VM, document.getElementById("container1"));
    }

    if ($.isEmptyObject(container2VM)) {
        container2VM = new Container2ViewModel();
        ko.applyBindings(container2VM, document.getElementById("container2"));
    }
});

Así puedes añadir cualquier número de viewmodels para divs separados. Pero asegúrese de no crear un modelo de vista separado para un div dentro del div registrado.

 20
Author: Janith Widarshana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-16 13:29:54

Compruebe el plugin MultiModels para Knockout JS - https://github.com/sergun/Knockout-MultiModels

 3
Author: Sergey Zwezdin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-27 16:09:23

Usamos componentes para lograr eso. ( http://knockoutjs.com/documentation/component-overview.html )

Por ejemplo, tenemos esta biblioteca de componentes que estamos desarrollando: https://github.com/EDMdesigner/knobjs

Si profundiza en el código, verá que, por ejemplo, reutilizamos el componente knob-button en varios lugares.

 0
Author: gyula.nemeth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-28 20:15:55