Las expresiones reactivas no funcionan después de un reinicio()

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

  •  02-01-2020
  •  | 
  •  

Pregunta

Actualmente, mi equipo está utilizando Ractive para mostrar una serie de alertas.Cada alerta:

  • Representa una vista con Ractive
  • Iniciar Twitter widgets.js que realiza alguna manipulación DOM (para incrustar Tweets)
  • Cambia los datos en esa vista más tarde (cuando el usuario selecciona una alerta diferente)

Dado que los cambios DOM de Twitter interfieren con el DOM virtual de Ractive, actualmente utilizamos ractive.reset() para restablecer el DOM después de Twitter widgets.js acabados - el reset() previene un montón de problemas DOM como cannot appendChild of null lo cual ocurriría porque Twitter ha manipulado el DOM a espaldas de Ractive.

Sin embargo, después de correr ractive.reset() Las expresiones ya no parecen funcionar.

¿Es esta la forma correcta de manejar otras bibliotecas que podrían manipular el DOM?¿Cómo puedo hacer que las expresiones sigan funcionando después de la reset() ?

Aquí hay una demostración rápida: tenga en cuenta que la expresión funciona antes de la reset() pero no despué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>

Y el JSFiddle obligatorio

¿Fue útil?

Solución

Cuando usted llama ractive.reset(), reemplaza el data objeto - en este caso, eso incluye el swaggify función.Si lo devuelves, funciona bien: http://jsfiddle.net/rich_harris/49JAK/

(Tenga en cuenta que puse el código de actualización inmediatamente después de la llamada a binding.reset() - los cambios ocurren sincrónicamente, el .then() solo le permite programar una función para cuando se hayan completado las transiciones.Es compatible con Promises/A+, por lo que el código interno .then() siempre será asincrónico; en algunas situaciones, esto puede causar parpadeo, por lo que debe sincronizar > asíncrono siempre que sea posible).

Probablemente eso no sea lo que desea: desea poder tratar los datos y los formateadores de manera diferente.Un buen enfoque es colocar los formateadores en el prototipo. data objeto del que todos los demás heredan:

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>'
})

Demostración de este enfoque aquí: http://jsfiddle.net/rich_harris/chYD6/.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top