Actualiser observableArray lorsque les éléments ne sont pas observables

Fondamentalement, j'ai un observableArray et les valeurs de chaque élément sont pas observables. Cela signifie que lorsque je change la valeur d'un article de l'INTERFACE utilisateur à l'intérieur d'une boucle foreach de la observableArray ne mettent pas à jour en conséquence.

Cela signifie un changement massif si je dois mettre à observable, donc, il y a un moyen pour que je puisse actualiser, soit de l'INTERFACE utilisateur ou observableArray foreach manuellement?

InformationsquelleAutor user1166905 | 2012-11-05

knockout.js

56

Oui, vous pouvez appeler valueHasMutated fonction de votre tableau:
```
yourArray.valueHasMutated();
```
EDIT:
Si le premier n'aide pas, vous pouvez le faire "sale" refresh:
```
self.refresh = function(){
    var data = self.array().slice(0);
    self.array([]);
    self.array(data);
};
```
Voici de travail violon: http://jsfiddle.net/vyshniakov/FuEy6/2/
- Ce n'est toujours pas de mise à jour de l'INTERFACE utilisateur pour moi
- valueHasMutated a bien fonctionné pour moi.
- pourquoi avez-vous besoin de faire une copie du tableau en appelant slice(0)? le suivant fonctionne aussi bien et même mieux var data = self.array();self.array(null);self.array(data);
- Cette sale actualisation cher si le code HTML généré par la matrice de liaison est grand. Cela peut se produire si le tableau a beaucoup d'éléments, ou si chacun des éléments rend un grand modèle ou partie des éléments HTML. Si c'est un problème pour vous, vous pouvez utiliser ma solution ci-dessous, qui est moins cher.
- Knock-out est vraiment une caisse quand il s'agit de la manipulation des tableaux. Pourquoi ne peut-il pas être plus comme Angulaires - c'est à dire juste travail!?
InformationsquelleAutor Artem Vyshniakov
19

Lorsque vous avez un observables tableau avec les éléments observables, et certaines propriétés de l'un des éléments dans le tableau des modifications, si vous voulez vous rafraîchir seul élément, vous pouvez utiliser indexOf et splice, comme ceci:
```
var changedIdx = obsArray.indexOf(changedItem);
obsArray.splice(changedIdx , 1); //removes the item from the array
obsArray.splice(changedIdx , 0, changedItem); //adds it back
```
Ce qu'il fait, est à la recherche de l'élément dans le tableau, supprimer, et de l'insérer à l'arrière. Quand il est inséré, l'élément est lié à nouveau, avec les nouvelles valeurs.

Si vous aimez cette solution, vous pouvez étendre les fonctionnalités de tous les ko observables tableaux:
```
ko.observableArray.fn.refresh = function (item) {
    var index = this['indexOf'](item);
    if (index >= 0) {
        this.splice(index, 1);
        this.splice(index, 0, item);
    }
}
```
Ensuite, lorsque vous modifiez un élément d'un tableau, il vous suffit de faire cet appel:
```
obsArray.refresh(changedItem);
```
Si vous avez de nombreux éléments de votre tableau, vous obtiendrez de meilleures performances avec le respect de la dirty actualisation par Artem Vyshniakov, qui met à jour les liaisons pour tous les éléments dans le tableau, et pas seulement pour le changement de l'un.

Remarque: le valueHasMutated, appart de sans-papiers (et pour un usage interne, je suppose), vérifie seulement si le tableau lui-même a changé, pas si la non-observables éléments dans le tableau ont changé, de sorte qu'il ne fonctionne pas. I. e. il détecte uniquement si vous avez ajouté des éléments au tableau, supprimé les éléments du tableau, les éléments modifiés de la gamme avec de nouveaux, différents éléments ou modifier l'ordre des éléments. Mais il ne vérifie pas si les éléments eux-mêmes ont changé
- belle, des trucs utiles, merci
- Notez que obsArray.indexOf() look pour l'élément correspondant de la valeur à l'aide de === mais en javascript {'x': 'X'} === {'x': 'X'} return false
- Vous avez raison. Toutefois, dans ce scénario vous avez une référence à l'élément du tableau dont vous souhaitez mofidy. Vous n'êtes pas la modification d'un objet qui ressemble à celui de la matrice, mais l'objet dans le tableau. Ainsi, l'utilisation de indexOf trouverez. Si vous avez modifié un objet qui n'est pas dans le tableau, vous devez remplacer l'objet du tableau avec la nouvelle, qui est différente de la modification des propriétés de un élément dans le tableau et en l'informant qu'il a changé, L'autre cas est complètement différent.
- Semble tout à fait inefficace de l'efficacité et de la mémoire de point de vue, la suppression d'un élément de milieu de tableau implique une copie de tous les éléments de références dans un nouveau tableau, l'insertion d'un élément en milieu de tableau implique une autre copie de tout élément de références dans une nouvelle matrice.
InformationsquelleAutor JotaBe
5

J'ai fini par utiliser la sale approche à partir de ci-dessus, mais fait en sorte que tous mes observables tableaux ont cette fonctionnalité.
```
ko.observableArray.fn.refresh = function () {
        var data = this().slice(0);
        this([]);
        this(data);
    };
```
La valueHasMutated ne fonctionne pas pour moi. Son genre de boiteux de l'ensemble de la liste doit être mise à jour. Ou dans mon cas, trouver un moyen de prolonger la ko plugin de cartographie pour remplir les observables des tableaux avec des objets observés..
- var data = this()/*.slice()*/;this(null);this(data); fonctionnera aussi bien et même plus vite
InformationsquelleAutor MrB
0

J'ai trouvé une solution simple, par le remplacement de l'ensemble de l'objet dans le tableau.

Dans cet exemple, le paramètre ix est l'indice, oLine est l'objet mis à jour et oVM.objProps.lignes contient le tableau. La solution a fonctionné comme un champion.
```
/* This contortion causes the computed function to fire because
 * we have replaced the entire line object.
 */
function forceRefresh(ix,oLine) {
  var oVM = pme.getVM();
  oLine = JSON.parse(JSON.stringify(oLine));
  oVM.oObjProp.lines[ix] = oLine;
}
```
InformationsquelleAutor Steve Pritchard
0

Je suis en utilisant le knock-out avec deferUpdates et la solution de JotaBe besoin d'une mise à jour.

Il semble knock-out détecte, sur supprimer/ajouter, c'est le même objet et donc, ne pas actualiser le tableau.

J'ai adopté la solution suivante:
```
ko.observableArray.fn.refresh = function (item, index) {
    if (index==null) index = this['indexOf'](item);
    if (index >= 0) {
        this.splice(index, 1, ko.utils.extend({}, item)) //create new item
        //this.splice(index, 1);
        //this.splice(index, 0, item);
    }
}
```
et d'actualiser le tableau correctement! 🙂

Remarque, j'ai ajouté un deuxième argument de la fonction de rafraîchissement, pour la spécification de l'index lorsque l'indice est donné, pour éviter indexOf exécuter.

InformationsquelleAutor RFex

Vous devez vous connecter pour publier un commentaire.