Raktive Ausdrücke funktionieren nach einem Reset() nicht

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

  •  02-01-2020
  •  | 
  •  

Frage

Mein Team verwendet derzeit Ractive, um eine Reihe von Warnungen anzuzeigen.Jede Warnung:

  • Rendert eine Ansicht mit Ractive
  • Starten Sie Twitter widgets.js was einige DOM-Manipulationen durchführt (um Tweets einzubetten)
  • Ändert die Daten in dieser Ansicht später (wenn der Benutzer eine andere Warnung auswählt)

Da die DOM-Änderungen von Twitter das virtuelle DOM von Ractive beeinträchtigen, verwenden wir derzeit ractive.reset() um das DOM nach Twitter zurückzusetzen widgets.js endet - die reset() verhindert eine ganze Reihe von DOM-Problemen wie cannot appendChild of null Dies würde passieren, weil Twitter das DOM hinter Ractives Rücken manipuliert hat.

Nachdem wir jedoch gelaufen sind ractive.reset() Ausdrücke scheinen nicht mehr zu funktionieren.

Ist dies der richtige Weg, mit anderen Bibliotheken umzugehen, die das DOM manipulieren könnten?Wie kann ich dafür sorgen, dass Ausdrücke nach dem weiterhin funktionieren? reset() ?

Hier ist eine kurze Demo – beachten Sie, dass der Ausdruck vor dem funktioniert reset() aber nicht danach:

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

Und das obligatorische JSFiddle

War es hilfreich?

Lösung

Wenn du anrufst ractive.reset(), es ersetzt die data Objekt - in diesem Fall schließt das das ein swaggify Funktion.Wenn Sie es zurücksetzen, funktioniert es einwandfrei: http://jsfiddle.net/rich_harris/49JAK/

(Beachten Sie, dass ich den Update-Code unmittelbar nach dem Anruf eingegeben habe binding.reset() - Die Änderungen erfolgen synchron, d.h .then() Sie können lediglich eine Funktion planen, wenn alle Übergänge abgeschlossen sind.Es ist Promises/A+-kompatibel, also der darin enthaltene Code .then() wird immer asynchron sein – in manchen Situationen kann dies zu Flimmern führen, also synchronisieren > asynchron, wo möglich.)

Das ist jedoch wahrscheinlich nicht das, was Sie wollen – Sie möchten die Daten und die Formatierer unterschiedlich behandeln können.Ein guter Ansatz besteht darin, die Formatierer auf dem Prototyp zu platzieren data Objekt, von dem alle anderen erben:

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 dieses Ansatzes hier: http://jsfiddle.net/rich_harris/chYD6/.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top