KnockOutJS-wiele ViewModels w jednym widoku

Myślę, że moja aplikacja staje się teraz dość duża, zbyt duża, aby obsłużyć każdy Widok za pomocą jednego ViewModel.

Więc zastanawiam się, jak trudno byłoby stworzyć wiele modeli widoku i załadować je wszystkie do jednego widoku. Z uwagą, że muszę również być w stanie przekazać x ViewModel DANE do Y ViewModel DANE, aby poszczególne Viewmodele musiały być w stanie komunikować się ze sobą lub przynajmniej być świadome siebie.

Na przykład mam <select> rozwijane, że select rozwijane ma wybrany stan, który pozwala mi przekazać ID zaznaczonej pozycji w <select> do innego wywołania Ajax w oddzielnym ViewModel....

Wszelkie punkty dotyczące radzenia sobie z wieloma Viewmodelami w jednym widoku docenione :)

Author: Richard Nalezynski, 2012-02-15
Source

5 answers

Jeśli wszystkie muszą znajdować się na tej samej stronie, jednym z łatwych sposobów jest posiadanie modelu widoku głównego zawierającego tablicę (lub listę właściwości) innych modeli widoku.

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

Wtedy twój {[1] } może mieć inne właściwości w razie potrzeby, dla samej strony. Komunikacja między modelami widoku nie byłaby w tej sytuacji trudna, ponieważ można by przekazać za pośrednictwem masterVM, lub można by użyć $parent / $root w wiązaniach lub innych niestandardowych opcjach.

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-01 18:07:19

Knockout obsługuje teraz Wiązanie wielu modeli. Metoda ko.applyBindings() pobiera opcjonalny parametr-element i jego potomków, do których Wiązanie będzie aktywowane.

Na przykład: 

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

To ogranicza aktywację do elementu o ID someElementId i jego potomków.

Zobacz Dokumentacja aby uzyskać więcej szczegółów.

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-26 09:55:49

To jest moja odpowiedź po ukończeniu bardzo dużego projektu z dużą ilością ViewModels w jednym widoku.

Html View 

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

Dla tego widoku tworzę 2 modele widoków dla id = container1 i id = container2 w dwóch oddzielnych plikach javascript.

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

}

Następnie po tych dwóch viewmodelach rejestrują się jako oddzielne viewmodele w 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"));
    }
});

W ten sposób możesz dodać dowolną liczbę viewmodels dla osobnych div. Ale upewnij się, że nie tworzysz oddzielnego modelu widoku dla div wewnątrz zarejestrowanego div.

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-16 13:29:54

Sprawdź wtyczkę MultiModels dla 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/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-27 16:09:23

Używamy do tego komponentów. ( http://knockoutjs.com/documentation/component-overview.html )

Na przykład mamy bibliotekę komponentów, którą tworzymy: https://github.com/EDMdesigner/knobjs

Jeśli zagłębisz się w kod, zobaczysz, że na przykład ponownie używamy komponentu pokrętło-przycisk w kilku miejscach.

 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/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-28 20:15:55