Javascript Girl
  1. Javascript Girl
  3. Diviser le modèle de vue knock-out en plusieurs fichiers
Intereting Posts
Le gestionnaire d'événements OnChange pour le bouton radio (INPUT type = "radio") ne fonctionne pas comme une seule valeur Comment puis-je charger le contenu d'un fichier texte dans une variable javascript? Trouver et remplacer une zone de texte Appelez le service angularjs à partir du code js simple Aidez à comprendre le bouton de validation / désactivation du bouton jQuery Positions de défilement "Sticky" ES6 promet: comment chaîner des fonctions avec des arguments PreventDefault () ne fonctionne pas pour l'événement de changement Utilisez CSS (et peut-être JavaScript) pour faire un élément être carré (ou maintenir un rapport d'aspect spécifique) Comment puis-je contourner le comportement octal de JavaScript de ParseInt? JQuery text () change on toggle ()? Événement Mousehold à Jquery PHP: sur le changement sélectionné, publier le formulaire à soi-même Puis-je créer un type TypeScript et l'utiliser lorsque AJAX renvoie les données JSON? Concept d'héritage prototypique en javascript en tant que langage basé sur un prototype

Diviser le modèle de vue knock-out en plusieurs fichiers

Mon modèle de vision a commencé à devenir très important, donc j'ai décidé de le diviser en plusieurs fichiers. J'ai déjà essayé plusieurs approches différentes mais rien ne fonctionnait.

Mon modèle de vision ressemble à: 

namespace.model = function(constructorParam) { var self = this; self.param1 = ko.observable(constructorParam.param1); self.param2 = ko.observable(privateFunction(constructorParam)); self.clickEvent = function() { // do something with params // call some private funcitons privateFunction2(self.param2); }; function privateFunction(param) { // do some stuff } function privateFunction2(param) { // do some stuff } };

J'ai besoin d'accéder à des fonctions privées et à des paramètres observables sur plusieurs fichiers. Mon modèle final devrait ressembler à ceci: 

 // file 1 // contains constructor and param initialization + many common private helper funcitons namespace.model = function(constructorParam) { var self = this; self.param1 = ko.observable(constructorParam.param1); self.param2 = ko.observable(privateFunction(constructorParam)); function privateFunction(param) { // do some stuff } function privateFunction2(param) { // do some stuff } }; // file 2 // contains event hendlers self.clickEvent = function () { // i need to acces properties from namespace.model self.param1 // call some private funcitons privateFunction2(self.param2); }; // view model initialization ko.applyBindings(new namespace.model(initValues));

Est-il possible de réaliser quelque chose comme ça avec un knock-out? Merci

Je voudrais jeter un oeil à une bibliothèque comme RequireJS qui pourrait être utilisé pour diviser votre modèle de vision en différents «modules» qui sont ensuite chargés dans votre ViewModel principal.

Il existe des exemples très simples d'utilisation d'RequireJS avec Knockout sur le site Web Knockout ici .

Jetez un oeil à quelques articles vraiment utiles de John Papa pour créer des applications de page unique ici .

Enfin, j'ai trouvé une façon de le faire ici . Voici un exemple complet: 

 <div> Name: <input data-bind="value: name" type="text" /> <br /> Surname: <input data-bind="value: surname" type="text" /><br /> Fullname: <span data-bind="text: fullName"></span><br /> <button data-bind="click: showName">Show Name</button> </div> <script> Function.prototype.computed = function () { this.isComputed = true; return this; }; Object.prototype.makeComputeds = function () { for (var prop in this) { if (this[prop] && this[prop].isComputed) { this[prop] = ko.computed(this[prop], this, { deferEvaluation: true }); } } }; // file 1 var namespace = namespace || {}; namespace.model = function (params) { var self = this; self.name = ko.observable(params.name); self.surname = ko.observable(params.surname); self.makeComputeds(); }; // file 2 (function () { function showFullName(fullName) { alert(fullName); } ko.utils.extend(namespace.model.prototype, { showName: function() { showFullName(this.fullName()); }, // computed observable fullName: function() { return this.name() + " " + this.surname(); }.computed() }); })(); ko.applyBindings(new namespace.model({ name: "My Name", surname: "My Surname" })); </script>

MODIFIER

Il existe un projet appelé Durandal qui combine RequireJS et KnockoutJS. Il vaut la peine d'examiner si vous êtes intéressé par les meilleures pratiques d'architecture SPA pour KnockoutJS.