Nous venons de commencer en bas de ce chemin d'accès au travail, et ne sont donc pas tout à fait sûr de ce que nous faisons. Mais voici l'idée que nous avons.
La page doit être composé d'un certain nombre de "composants", éventuellement imbriqués. Chaque composant a un modèle de vue et une méthode publique, renderTo(el), qui consiste essentiellement à ne
ko.applyBindings(viewModelForThisComponent, el)
Il peut également avoir la capacité de rendre les sous-composants.
La construction ou la mise à jour d'un composant consiste à donner un modèle (par exemple, les données JSON à partir du serveur), à partir de laquelle il va dériver la vue appropriée modèle.
L'application est alors créé par l'imbrication d'un tas de composants, à commencer par un composant de l'application.
Voici un exemple pour un "hypothétique" livre-la gestion de l'application. Les composants sont LibraryUI (affiche une liste de tous les titres de livres) et DetailsUI (une section de l'application qui affiche des détails sur un livre).
function libraryBookViewModel(book) {
return {
title: ko.observable(book.title),
showDetails: function () {
var detailsUI = new BookDetailsUI(book);
detailsUI.renderTo(document.getElementById("book-details"));
}
};
}
function detailsBookViewModel(book) {
return {
title: ko.observable(book.title),
author: ko.observable(book.author),
publisher: ko.observable(book.publisher)
};
}
function LibraryUI(books) {
var bookViewModels = books.map(libraryBookViewModel);
var viewModel = {
books: ko.observableArray(bookViewModels);
};
this.renderTo = function (el) {
ko.applyBindings(viewModel, el);
};
}
function BookDetailsUI(book) {
var viewModel = detailsBookViewModel(book);
this.renderTo = function (el) {
ko.applyBindings(viewModel, el);
};
}
Notez comment nous pourrions rendre le livre les détails apparaissent dans un jQuery dialogue de l'INTERFACE utilisateur, au lieu d'un singleton #book-details élément, en changeant l' showDetails fonction pour faire
var dialogEl = document.createElement("div");
detailsUI.renderTo(dialogEl);
$(dialogEl).dialog();
