Ajouter/supprimer des éléments imbriqués Knockout observableArray

Question

J'essaie d'ajouter/de retirer un observableArray imbriqué dans KnockoutJS. J'ai un tableau composé de plusieurs éléments, chacun avec un objet attribut, un objet type et un tableau attributeValue qui contient des objets. Donc, c'est un tableau imbriqué.

Le tableau allAttributes est observableArray. Puis j'ai essayé de rendre le tableau attributValue observable en faisant un nouveau ViewModel (attributeValueViewModel) avec attributeValues ​​comme ko.observableArray ([]).

J'ai fait deux fonctions de Knockout (qui ne fonctionnent pas) et j'essaye d'ajouter/retirer des valeurs de/vers cette rangée. Le problème est que le tableau est imbriqué, donc je dois accéder à l'attributID à travers this.attribute.id. self.allAttributes [i] .attributeValues ​​[j] devrait être l'objet que je suis l'ajout/suppression ... où i = attributeID et j = indice de l'objet de valeur de l'attribut

Pourquoi ne sont pas les fonctions de travail ?

Voici mon violon: http://jsfiddle.net/M6Hqj/2/

Answer 1

Tout d'abord, vous écrasez la fonction observable dans votre modèle de vue interne, par exemple Lorsque vous affectez obj.attribute = item.attribute;, vous écrasez votre affectation initiale de self.attribute = ko.observable(data.attribute);. Au lieu de cela affecter la valeur par l'observable, comme ceci:

obj.attribute(item.attribute); //instead of obj.attribute = item.attribute; 

Cela rendra également votre travail d'appel de fonction self.addAttributeValue() puisque le tableau est maintenant observable.

Ensuite, dans votre fonction self.removeAttributeValue(), l'this appel fait référence à l'enregistrement spécifique à l'intérieur votre tableau attributeValues donc, quand vous faites this.attributeValues.splice(), il ne peut pas trouver votre propriété attributeValues objet. Ainsi, déplacer la fonction dans l'objet attributeValueViewModel et utiliser self au lieu de this, comme ceci:

//This is inside function attributeValueViewModel(data) 
self.removeAttributeValue = function() { 
    alert(JSON.stringify(this)); 
    self.attributeValues.splice(this.id, 1); 
} 

Pour l'appeler, il suffit de changer votre code lient les données à utiliser $parent au lieu de $root, comme ceci:

<button data-bind="click: $parent.removeAttributeValue">REMOVE</button> 

Quelque chose comme ce violon ici: http://jsfiddle.net/UMB79/

(Notez que ces changements que vous avez encore à modifier votre logique pour ajouter correctement/supprimer eleme nts, ​​car il est encore buggé)