Активные выражения не работают после сброса ()

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

  •  02-01-2020
  •  | 
  •  

Вопрос

Моя команда в настоящее время использует Ractive для отображения серии оповещений.Каждое предупреждение:

  • Визуализирует представление с помощью Ractive
  • Начните Твиттерить widgets.js который выполняет некоторые манипуляции с DOM (для встраивания твитов)
  • Изменяет данные в этом представлении позже (когда пользователь выберет другое оповещение).

Поскольку изменения DOM в Twitter влияют на виртуальный DOM Ractive, в настоящее время мы используем ractive.reset() чтобы сбросить DOM после запуска Twitter widgets.js финиши - самые reset() предотвращает целую кучу проблем с DOM, таких как cannot appendChild of null что произошло бы из-за того, что Twitter манипулировал DOM за спиной Ractive.

Однако после того, как мы запустим ractive.reset() выражения, похоже, больше не работают.

Правильно ли это обращаться с другими библиотеками, которые могут манипулировать DOM?Как я могу заставить выражения продолжать работать после завершения reset() ?

Вот краткая демонстрация - обратите внимание, что выражение работает перед reset() но не потом:

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

И тот обязательный JSFiddle

Это было полезно?

Решение

Когда ты позвонишь ractive.reset(), он заменяет data объект - в данном случае, который включает в себя swaggify функция.Если вы положите его обратно, он будет работать нормально: http://jsfiddle.net/rich_harris/49JAK/

(Обратите внимание, что я поместил код обновления сразу после вызова binding.reset() - изменения происходят синхронно, .then() просто позволяет вам запланировать функцию на момент завершения любых переходов.Это соответствует Promises / A +, поэтому код внутри .then() всегда будет асинхронным - в некоторых ситуациях это может вызвать мерцание, поэтому синхронизируйте > асинхронный, где это возможно.)

Хотя, вероятно, это не то, чего вы хотите - вы хотите иметь возможность обрабатывать данные и форматеры по-разному.Хороший подход заключается в размещении параметров форматирования на прототипе data объект, от которого наследуются все остальные:

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

Демонстрация этого подхода приведена здесь: http://jsfiddle.net/rich_harris/chYD6/.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top