Ractive expressões não funcionar depois de um reset()

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

  •  02-01-2020
  •  | 
  •  

Pergunta

A minha equipa está actualmente a utilizar Ractive para mostrar uma série de alertas.Cada um alerta:

  • Renderiza um modo de exibição com Ractive
  • Iniciar Twitters widgets.js o que faz algumas manipulação DOM (para incorporar Tweets)
  • Altera os dados no modo de exibição posterior (quando o usuário seleciona um alerta diferente)

Desde que o Twitter de DOM alterações interferir com Ractive do virtual DOM, atualmente usamos ractive.reset() para redefinir o DOM depois de o Twitter widgets.js acabamentos - o reset() impede que um monte de problemas como DOM cannot appendChild of null o que pode ocorrer porque o Twitter tem manipulado o DOM atrás Ractive está de volta.

No entanto, depois de executar ractive.reset() expressões não parecem funcionar.

É este o caminho certo para lidar com outras bibliotecas que podem manipular o DOM?Como posso fazer expressões continuar a trabalhar após a reset() ?

Aqui está uma rápida demonstração - observe a expressão funciona antes de o reset() mas não posteriormente:

    <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>

E o obrigatório JSFiddle

Foi útil?

Solução

Quando você chamar ractive.reset(), ele substitui o data objeto - neste caso, o que inclui a swaggify função.Se você colocá-lo de volta, ele funciona muito bem: http://jsfiddle.net/rich_harris/49JAK/

(Note que eu coloquei o código de atualização imediatamente após a chamada para binding.reset() - as mudanças acontecem de forma síncrona, o .then() apenas permite que você programe uma função para quando as transições foram concluídas.Ele Promete - /A+ compatível para o código dentro .then() sempre vai ser assíncrona - em algumas situações que podem causar cintilação, de modo a sincronizar > assíncrona onde possível).

Isso é provavelmente o que você quer embora, você quer ser capaz de tratar os dados e os formatadores de forma diferente.Uma boa prática é colocar os formatadores no prototipada data objeto que todos os outros herdar de:

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

Demonstração de esta abordagem aqui: http://jsfiddle.net/rich_harris/chYD6/.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top