Активные выражения не работают после сброса ()
-
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/.