Question

我的团队目前正在使用Ractive来显示一系列警报。每个提醒：

使用Ractive
启动Twitters widgets.js，它执行一些DOM操作（嵌入推文）
稍后更改该视图中的数据（当用户选择其他提醒时）

由于Twitter的DOM更改会干扰Ractive的虚拟DOM，我们目前使用ractive.reset()在Twitter的widgets.js完成后重置DOM - {{1因为Twitter操纵了Ractive背后的DOM，所以会出现像reset()这样的大量DOM问题。

然而，在我们运行cannot appendChild of null表达式后，似乎不再有效。

这是处理可能操纵DOM的其他库的正确方法吗？如何在ractive.reset()？

之后继续使用表达式

这是一个快速演示 - 注意表达式在reset()之前有效，但之后没有：

reset()

obligatory JSFiddle

Answer 1

当您致电ractive.reset()时，它会替换data对象 - 在这种情况下，它包含swaggify功能。如果你把它放回去，它可以正常工作：http://jsfiddle.net/rich_harris/49JAK/

（请注意，我在调用binding.reset()后立即将更新代码放入 - 更改同步发生，.then()只允许您安排任何转换完成时的函数它的Promise / A +兼容，因此.then()内的代码将始终是异步的 - 在某些可能导致闪烁的情况下，所以尽可能同步＆gt;异步。）

这可能不是你想要的 - 你希望能够以不同的方式处理数据和格式化程序。一个好方法是将格式化程序放在原型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/。

重置后，Ractive表达式不起作用（）

1 个答案: