Les expressions réactives ne fonctionnent pas après une réinitialisation ()

StackOverflow https://stackoverflow.com//questions/25077763

  •  02-01-2020
  •  | 
  •  

Question

Mon équipe utilise actuellement Ractive pour afficher une série d'alertes.Chaque alerte :

  • Rend une vue avec Ractive
  • Démarrer Twitter widgets.js qui effectue quelques manipulations DOM (pour intégrer des Tweets)
  • Modifie les données dans cette vue ultérieurement (lorsque l'utilisateur sélectionne une alerte différente)

Étant donné que les modifications du DOM de Twitter interfèrent avec le DOM virtuel de Ractive, nous utilisons actuellement ractive.reset() pour réinitialiser le DOM après celui de Twitter widgets.js se termine - le reset() évite tout un tas de problèmes DOM comme cannot appendChild of null ce qui se produirait parce que Twitter a manipulé le DOM dans le dos de Ractive.

Cependant, après avoir couru ractive.reset() les expressions ne semblent plus fonctionner.

Est-ce la bonne façon de gérer d'autres bibliothèques susceptibles de manipuler le DOM ?Comment puis-je faire en sorte que les expressions continuent à fonctionner après le reset() ?

Voici une démo rapide - notez que l'expression fonctionne avant le reset() mais pas après :

    <body>
        <h1>test</h1>
        <div class="bound"></div>
        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

        <script>
            var binding = new Ractive({
                el: document.querySelector('.bound'),
                data: {
                    name: 'mike',
                    swaggify: function(string) {return 'SWAG'+string}
                },
                template: '<p>Hello, {{ swaggify(name) }}!</p>'
            })

            binding.reset().then(function(){
                binding.data.name = 'steve'
            })
        </script>
    </body>

Et le JSFiddle obligatoire

Était-ce utile?

La solution

Quand vous appelez ractive.reset(), il remplace le data objet - dans ce cas, cela inclut le swaggify fonction.Si tu le remets, ça marche bien : http://jsfiddle.net/rich_harris/49JAK/

(Notez que j'ai mis le code de mise à jour immédiatement après l'appel à binding.reset() - les changements se produisent de manière synchrone, le .then() vous permet simplement de planifier une fonction lorsque les transitions sont terminées.Il est conforme à Promises/A+ donc le code à l'intérieur .then() sera toujours asynchrone - dans certaines situations pouvant provoquer un scintillement, alors synchronisez > asynchrone lorsque cela est possible.)

Ce n'est probablement pas ce que vous voulez - vous voulez pouvoir traiter les données et les formateurs différemment.Une bonne approche consiste à placer les formateurs sur le prototype data objet dont tous les autres héritent :

var helpers = Ractive.defaults.data; // Ractive.defaults === Ractive.prototype
helpers.swaggify = function(string) {return 'SWAG'+string};

var binding = new Ractive({
  el: document.querySelector('.bound'),
  data: {
    name: 'mike',
    swaggify: function(string) {return 'SWAG'+string}
  },
  template: '<p>Hello, {{ swaggify(name) }}!</p>'
})

Démo de cette approche ici : http://jsfiddle.net/rich_harris/chYD6/.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top