web-dev-qa-db-fra.com

Comment structurer une application d'une seule page avec knockout.js?

Je me demande surtout comment organiser des choses comme les fenêtres modales et les pages dynamiques comme les profils. Le viewModel ne doit-il contenir qu'une seule vue de profil ou contenir tous les profils chargés? Ici, cela ne semble pas très "propre".

viewModel = {
  profile: ko.observableArray([
    new ProfileViewModel()
    //... any others loaded
  ])
, createPostModal: {
    input: ko.observable()
  , submit: //do something to submit...
  }
}

<div data-bind="foreach: profile"><!-- profile html --></div>
<div data-bind="with: createPostModal"></div>

Cette façon ne semble pas très cohérente. Y a-t-il quelqu'un qui a construit une application d'une seule page avec knockout qui peut offrir des conseils? Des échantillons de code seraient appréciés.

javascriptknockout.js
35
sdfadfaasd

Nous ne faisons que commencer dans cette voie au travail, et nous ne savons donc pas trop ce que nous faisons. Mais voici l'idée que nous avons.

La page doit être composée 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 fait essentiellement

ko.applyBindings(viewModelForThisComponent, el)

Il pourrait également avoir la possibilité de restituer des sous-composants.

La construction ou la mise à jour d'un composant consiste à lui donner un modèle (par exemple des données JSON du serveur), dont il dérivera le modèle de vue approprié.

L'application est ensuite créée en imbriquant un tas de composants, en commençant par un composant d'application de niveau supérieur.

Voici un exemple d'application "hypothétique" de gestion de livre. Les composants sont LibraryUI (affiche une liste de tous les titres de livres) et DetailsUI (une section de l'application qui affiche les détails d'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 faire apparaître les détails du livre dans une boîte de dialogue jQuery UI, plutôt que dans un singleton #book-details élément, en changeant la fonction showDetails à faire

var dialogEl = document.createElement("div");
detailsUI.renderTo(dialogEl);
$(dialogEl).dialog();
15
Domenic

Il existe 3 frameworks qui aident à créer des SPA à l'aide de Knockoutjs.

J'ai utilisé Durandal et je l'aime vraiment. Facile à utiliser et possède de nombreuses configurations Nice pour que vous puissiez brancher vos propres implémentations. En outre, Durandal est créé par le même créateur de Caliburn qui était un cadre très populaire pour la création d'applications Silverlight/WPF.

12
Evan Larsen

Maintenant en 2014, vous voulez probablement utiliser la fonctionnalité de composant de Knockout et Yeoman pour échafauder votre projet ko initial. Voir cette vidéo: Steve Sanderson - Architecture de grandes applications à page unique avec Knockout.js

6
programmer

[mise à jour le 5 avril 2013] au moment de la rédaction, cette réponse était valide. Actuellement, je suggère également l'approche Durandal JS comme chemin à parcourir. Ou vérifiez modèles Hot Towel ou Hot Towelette SPA de John Papa si vous utilisez ASP.NET MVC. Cela utilise également Durandal.

Réponse originale ci-dessous:

Je voudrais vous montrer la série en quatre parties de Phillipe Monnets sur Knockout.js. Il est le premier Blogger que j'ai rencontré qui divise son exemple de projet en plusieurs fichiers. J'aime vraiment la plupart de ses idées. La seule chose que j'ai manquée, c'était comment gérer les collections ajax/rest récupérées en utilisant une sorte de modèle de référentiel/passerelle. C'est une bonne lecture.

Lien vers la partie 1: http://blog.monnet-usa.com/?p=354

Bonne chance!

3
Maarten Docter

Je viens d'ouvrir le mini-framework SPA que j'ai mis en place, Knockout étant le composant principal.

knockout-spa Un mini (mais à part entière) structure SPA construite au-dessus de Knockout, Require, Director, Sugar. https://github.com/onlyurei/knockout-spa

Démo en direct: http://knockout-spa.mybluemix.net

Caractéristiques

  • Routage (basé sur Flatiron's Director): historique HTML5 (pushState) ou hachage.
  • Hautement composable et réutilisable: choisissez des modules/composants pour une page dans le JS spécifique à la page et ils seront automatiquement câblés pour le modèle HTML de la page
  • Prêt pour le référencement (prerender.io)
  • Rapide et léger (85 Ko de JS minifiés et gizpped)
  • Construction de bundle à deux niveaux pour JS pour la production: module commun qui sera utilisé par la plupart des pages et modules spécifiques aux pages qui seront chargés paresseusement
  • Structure de dossier organisée pour vous aider à rester sain d'esprit pour organiser et réutiliser JS, CSS, HTML
  • Utilisation de Knockout 3.3.0+ si prêt pour la version Knockout du composant Web et des balises personnalisées ( http://knockoutjs.com/documentation/component-overview.html )
  • Toute la documentation se trouve dans les propres pages d'accueil des principales dépendances, de sorte que vous n'avez pas besoin d'apprendre complètement un nouveau cadre
1
onlyurei