2012-08-08 4 views
2

Juste curieux, comment peut-on créer une liaison 'foreach' qui répète sur une liste chaînée la façon dont la liaison 'foreach' actuelle se répète sur les tableaux?Reliure Knockout.js 'foreach' pour une liste chaînée

J'ai créé a jsFiddle for tinkering.

Je pense qu'une liste liée pourrait être un idiome utile à utiliser avec Knockout.js. En particulier, s'il est correctement fait, le DOM ne sera mis à jour que pour les éléments ajoutés/supprimés (la liste entière n'est pas mise à jour lorsqu'un élément est ajouté/supprimé) et l'ajout/suppression au milieu de la liste est complexe. O (1), contre O (n) pour un tableau.

Répondre

0

C'est une bonne idée, mais malheureusement je ne pense pas que ce soit possible.

Vous devez vous abonner à l'observable pour la tête de la liste et au 'suivant' observable pour chaque élément. Le problème est que vous ne gagnez aucun avantage à moins que vous sachiez laquelle des observables a déclenché le changement. Si vous modifiez quelque chose au milieu de la liste, tout le problème est que la liaison foreach doit être capable de mettre à jour cette partie du DOM sans avoir à parcourir toute la structure. Les liaisons ne le permettent pas pour le moment - si une liaison souscrit à plusieurs observables, sa méthode update sera appelée si l'une d'elles change, sans savoir laquelle d'entre elles a changé.

De plus, même si cela pouvait fonctionner, toutes ces structures et abonnements ko.observable() supplémentaires seraient un sérieux problème. Trois observables au lieu de simplement avoir un autre élément de tableau.

Pour éviter des changements inutiles au DOM, vous pouvez comparer la nouvelle structure à l'ancienne et apporter les modifications appropriées, mais cela peut être fait quand vous utilisez des tableaux de toute façon (je ne pense pas que la liaison foreach intégrée optimisation).

+0

Merci pour la publication. Je ne comprends pas le problème au paragraphe 3 - pourriez-vous élaborer, s'il vous plaît? Pourquoi auriez-vous besoin de l'observable qui a déclenché le changement? Voulez-vous dire l'élément précédent? Je m'attendrais à ce que cette structure soit nécessairement une liste à double sens (pour cette raison et d'autres), ce qui pourrait résoudre le problème qui vous préoccupe? Les frais généraux de tous les koobservables m'inquiètent - j'avais pensé (peut-être à tort) qu'ils étaient assez légers - sauf s'ils se trouvaient au bas d'un niveau d'abonnement, ce que ces itérateurs ne devraient pas être. –

+0

Une approche alternative pourrait-elle être d'avoir une observable 'calculée 'qui traverse la liste chaînée, en plaçant chaque élément dans un tableau plat, ordonné, alors vous pouvez' foreach' sur cela. Cela vous permettrait-il de réaliser ce que vous vouliez? – WickyNilliams

+0

J'ai mis à jour la réponse. Je ne vois pas comment le fait d'en faire un 'calculé' aide, cela en fait juste un tableau très cher. Je suis incapable de voir une raison de ne pas simplement utiliser un tableau en premier lieu. Il y a certainement de l'espace pour une nouvelle liaison qui ne met pas à jour cette section DOM à partir de zéro, mais elle utiliserait quand même un tableau. – SystemParadox

1

Array basé foreach est déjà très performant; Les éléments DOM ne sont ajoutés/supprimés que comme nessaire; Bien sûr, l'ensemble du tableau est analysé pour les changements, mais il est assez rapide (ko seulement avoir des signaux de changement grossiers pour tableau). Les insertions ou suppressions aléatoires sont rapides grâce à l'algorithme de distance utilisé.