Knockout.js Faire de chaque objet imbriqué Observable
Je suis en utilisant Knockout.js comme MVVM bibliothèque de lier mes données à certaines pages. Je suis actuellement à la construction d'une bibliothèque pour faire des appels de REPOS à un service web.
Mon service web RESTful renvoie une structure simple:
{
id : 1,
details: {
name: "Johnny",
surname: "Boy"
}
}
J'ai une observable parent principal, myObject
.
Quand je fais
myObject(ko.mapping.fromJS(data))
les phénomènes observables dans les myObject
sont:
id
name
surname
Comment puis-je faire details
(et théoriquement n'importe quel objet dans la structure observable)? J'ai besoin de ce comportement, de sorte que je peux mettre calculée observables sur les détails et de se faire remarquer dès le interne à des modifications de données.
J'ai mis en place une base de fonction récursive qui devrait faire l'affaire. Ce n'est pas, bien sûr, myObject.details
ne deviennent pas un observable.
//Makes every object in the tree an observable.
var makeAllObservables = function () {
makeChildrenObservables(myObject);
};
var makeChildrenObservables = function (object) {
//Make the parent an observable if it's not already
if (!ko.isObservable(object)) {
if ($.isArray(object))
object = ko.observableArray(object);
else
object = ko.observable(object);
}
//Loop through its children
for (var child in object()) {
makeChildrenObservables(object()[child]);
}
};
Je suis sûr que c'est quelque chose à propos des références incorrectes, mais comment puis-je résoudre ce problème? Merci.
- Pas une réponse directe, mais peut.Observer dans CanJS construit un imbriquée observables exactement comme vous le décrivez.
Vous devez vous connecter pour publier un commentaire.
Je ne pense pas que knock-out est doté d'un moyen d'observer les modifications des éléments enfants. Si je comprends bien votre question, quand quelqu'un change le nom que vous voulez un changement à des détails comme une entité à être remarqué. Pouvez-vous donner un exemple concret de la façon dont vous l'utiliser? Utiliseriez-vous un abonnement pour les détails observables pour réaliser une action?
La raison que votre code ne fait pas de détails d'une observable est parce que le javascript est le passage par valeur, donc la modification de la valeur de l '"objet" argument dans votre fonction ne change pas la valeur réelle que vous avez passé, seule la valeur de l'argument à l'intérieur de votre fonction.
Modifier
Si des changements sera propager automatiquement pour les parents, cela devrait rendre tous les enfants observables je pense, mais la racine de votre que vous passez la première fois devrait déjà être observable.
computed
observables, cela fonctionne. Dès que vous changez lefirstName
oulastName
,fullName
est déclenché. De cette façon, vous pouvez suivre les modifications dans l'une quelconque des éléments dans la structure. La fonction @jason-goemaat posté œuvres (merci!), mais il y a le besoin de savoir si elle a déjà été appliquée. J'ai mis une fonction qui définit le JS et rend tout le observable par lui-même. 😀knockout.js
qui fournit le RESTE des méthodes pour les entités et une belleundo
.Je voudrais utiliser le knock-out plugin de cartographie.
Cela permettra de créer votre hiérarchie d'objets avec tous les enfants comme des observables.
De ce que j'ai vécu, ko.la cartographie.fromJS ne fait pas un observable d'un objet.
Disons que vous avez ce ViewModel constructeur:
et cet objet de données:
}
et que vous utilisez data1 pour créer VM1:
Alors VM1.class ne sera pas un ko.observables, c'est une simple Objet javascript.
Si vous créez ensuite un autre viewmodel à l'aide d'un objet de données avec une valeur null membre de la classe, c'est à dire:
alors VM2.class est un ko.observables.
Si vous puis de l'exécuter:
alors VM2.class reste un ko.observables.
Donc, si vous créez un ViewModel à partir d'une graine objet de données où les membres de l'objet sont nuls, et puis popuplate avec un peuplé de données objet, vous aurez observables membres de la classe.
Cela conduit à des problèmes, parce que parfois, les membres de l'objet sont observables, et parfois ils ne le sont pas. Former les liaisons de travailler avec VM1 et ne pas travailler avec VM2. Ce serait bien si ko.la cartographie.fromJS toujours fait tout ce qu'un ko.observables, de sorte qu'il était cohérent?
En utilisant De Knock-Out De Plugin nous pouvons faire à l'enfant des éléments observables .Nous avons beaucoup d'options pour gérer la façon dont nous voulons que nos données afin de les rendre observables.
Voici un exemple de code :
J'ai joint un travail de violon: http://jsfiddle.net/wmqTx/5/
Je vais étendre Paolo del Mundo's réponse (qui je pense qu'il pourrait facilement être la meilleure et la seule solution à ce moment) avec mon exemple de solution.
Envisager frapontilloinitiale de l'objet:
La
details
de la propriété elle-même est un objet et en tant que telle ne PEUT PAS être un fait observable. Il en va de même pour laUser
propriété dans l'exemple ci-dessous, qui est également un objet. Ces deux objets ne peuvent pas être observables mais leur FEUILLE de propriétés peuvent être.Chaque feuille de propriété de votre arbre de données /modèle PEUT ÊTRE OBSERVABLE. La façon la plus simple à réaliser est que vous bien définir le modèle de cartographie avant de passer à la configuration du plugin comme paramètre.
Voir mon exemple ci-dessous.
EXEMPLE:
Disons que nous avons besoin de montrer une page html /point de vue où nous avons une liste d'utilisateurs sur une grille. À côté les Utilisateurs de la grille d'un formulaire d'édition d'un utilisateur sélectionné à partir de la grille est affichée.
ÉTAPE 1: DÉFINITION DES MODÈLES
ÉTAPE 2: CARTOGRAPHIE (POUR OBTENIR IMBRIQUÉE OBSERVABLES)
Disons que c'est votre première JSON modèle avec les données que vous souhaitez à la carte et d'obtenir un KO modèle imbriqué observables.
Maintenant que tout cela est défini, vous pouvez mapper:
ET VOUS AVEZ TERMINÉ! 🙂
La observableUserEditModel va contenir tous vos observables, même imbriquée ceux. Maintenant, la seule chose que vous devez prendre soin de afin de tester cela est de lier la
observableUserEditModel
objet avec votre code HTML. Astuce: utiliser lawith
de liaison et de tester les observablesobservableUserEditModel
structure de données de l'insertion de cette disposition dans votre mode HTML:Peut-être dans une future version il pourrait y avoir une option de configuration qui provoque ko.la cartographie.fromJS toujours de créer des observables. Il peut être activée pour les nouveaux projets ou après la mise à jour des liaisons d'un projet existant.
Ce que je fais pour éviter ce problème est de s'assurer que le modèle de graines de toujours avoir des Objets membre des propriétés peuplée, à tous les niveaux. De cette façon, toutes les propriétés de l'objet sont mappés sur les Pojo (Plain Old Objets Javascript), de sorte que le ViewModel ne pas les initialiser comme ko.observables. Il évite les "parfois observables, parfois non" de l'émission.
Meilleures salutations,
Mike