web-dev-qa-db-fra.com

Existe-t-il des cadres de routage / page knockoutjs?

Venant d'asp.net MVC 3. Dans MVC4, ils ont introduit les WebAPI. Ce serait bien de pouvoir faire tout le code de vue/route en javascript et de simplement compter sur MVC pour l'API. Heck, c'est vraiment cool que les webapi puissent être exécutés indépendamment d'IIS!

Cela étant dit:

Existe-t-il des cadres de page pouvant tirer parti de KnockoutJS qui sont similaires à ma maquette ci-dessous:

Framework.RegisterRoutes(..,mainViewModel);//sets the CurrentViewModel?

Chaque route étant un fichier séparé d'un viewModel et une vue à injecter dans la vue principale

var mainviewModel= function(){
   var self = this;
   self.CurrentViewModel = ko.observable();
   ...
   return self;
}

<div id="mainPageContent" data-bind:'html:CurrentViewModel.Render'>
</div>

Je sais que beaucoup de ceci peut être réalisé par soi-même, mais je ne sais pas comment réaliser les routes d'enregistrement/chargement de fichiers séparés

J'ai l'impression que les principales forces de knockoutjs sont la capacité de ne pas s'immiscer dans la façon dont vous codez js (c'est-à-dire de construire un objet/framework comme vous le souhaitez tant que les objets en interaction sont observables)

knockout.jsjavascript-framework
40
maxfridbe

Pager.js est un framework de routage d'URL spécialement conçu pour être utilisé avec Knockout.js. Assurez-vous de parcourir l'intégralité de Demo pour voir toute sa puissance et sa flexibilité. À mon humble avis, il dépasse de loin PathJS et Sammy.

45
James Messinger

Sammy.js est une excellente bibliothèque JavaScript de routage léger. Vous pouvez faire des choses comme celle-ci pour router une fois utilisé en association avec Knockout (à partir du site Web des didacticiels ou KnockoutJS):

$.sammy(function() {
    this.get('#:folder', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenMailData(null);
        $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
    });

    this.get('#:folder/:mailId', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenFolderData(null);
        $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
    });

    this.get('', function() {
        this.app.runRoute('get', '#Inbox');
    });
}).run();

Une autre option est d'utiliser SproutCore, mais c'est bien plus que nav, donc je ne recommande pas cette route à moins que vous ne vouliez tout SproutCore. Il existe de nombreuses autres bibliothèques, mais j'aime Sammy.js jusqu'à présent en raison de sa légèreté.

20
John Papa

Je voudrais jeter mon chapeau dans la course aux futurs Googlers/SOers avec ko-component-router .

L'API IMO est beaucoup plus succincte que Pager.js, et ayant été conçue explicitement pour KO, elle a intégré des goodies tels que des paramètres de route et de chaîne de requête observables.

Mieux encore, il est activement maintenu et le restera dans un avenir prévisible.

Avis de non-responsabilité [~ # ~] [~ # ~] : Je suis le développeur de ce package.

8
caseyWebb

J'ai utilisé PathJs avec un certain succès, il y a aussi Sammy qui est plus un framework. Aucun de ces éléments n'est spécifique au KO.

Une solution plus lourde mais optimisée KO serait Knockback .

J'espère que cela t'aides.

3
madcapnmckay

Question plus ancienne, mais pour référence, Durandal est un excellent cadre SPA pour Knockout:

http://durandaljs.com/documentation/Introduction/

2
7zark7

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) framework SPA construit au-dessus de Knockout, Require, Director, Sugar. https://github.com/onlyurei/knockout-spa

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

Traits

  • 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 pages d'accueil des dépendances principales, de sorte que vous n'avez pas besoin d'apprendre complètement un nouveau cadre
1
onlyurei