Espressioni ractive che non funzionano dopo un reset ()

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

  •  02-01-2020
  •  | 
  •  

Domanda

Il mio team sta attualmente usando raction per mostrare una serie di avvisi. Ogni avviso:

    .
  • rende una vista con raction
  • Start Twitter widgets.js che fa una certa manipolazione DOM (per incorporare i tweet)
  • Modifica i dati in quella vista in seguito (quando l'utente seleziona un avviso diverso)

Dal momento che i cambiamenti del DOM di Twitter interferiscono con il DOM Virtuale di Raction, attualmente usiamo ractive.reset() da resettare Il DOM dopo la finitura widgets.js di Twitter - il reset() impedisce un sacco di problemi di dom del dom come cannot appendChild of null che si verifichino perché Twitter ha manipolato il DOM dietro la schiena di Ractive.

Tuttavia, dopo aver eseguito le espressioni ractive.reset() non sembrano più funzionare.

È questo il modo giusto per gestire altre librerie che potrebbero manipolare il DOM? Come posso fare le espressioni continuare a lavorare dopo il reset()?

Ecco una demo veloce - Nota L'espressione funziona prima del reset() ma non successivamente: 

    <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 il obbligatoria jsfiddle

È stato utile?

Soluzione

Quando si chiama ractive.reset(), sostituisce l'oggetto data, in questo caso, che include la funzione swaggify. Se lo rimetti, funziona bene: http://jsfiddle.net/rich_harris/49Jak/

(Nota che ho inserito il codice di aggiornamento immediatamente dopo la chiamata a binding.reset(): le modifiche si verificano sincrono, il .then() consente di pianificare una funzione per quando vengono completate transizioni. Sono le promesse / A + conforme, quindi il codice all'interno .then() sarà sempre asincrono - in alcune situazioni che possono causare sfarfallio, quindi sincronizzare> Async dove possibile.)

Non è probabilmente quello che vuoi però - vuoi essere in grado di trattare i dati e i formatters in modo diverso. Un buon approccio è quello di mettere i formattes sull'oggetto Prototipal data che tutti gli altri ereditano da: 

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

Demo di questo approccio qui: http://jsfiddle.net/rich_harris/chyd6/ .

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top