Reset() 后 Ractive 表达式不起作用

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

  •  02-01-2020
  •  | 
  •  

题

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

  • 使用 Ractive 渲染视图
  • 启动推特 widgets.js 它进行一些 DOM 操作（嵌入推文）
  • 稍后更改该视图中的数据（当用户选择不同的警报时）

由于 Twitter 的 DOM 更改会干扰 Ractive 的虚拟 DOM，因此我们目前使用 ractive.reset() 在 Twitter 之后重置 DOM widgets.js 完成 - 的 reset() 防止一大堆 DOM 问题，例如 cannot appendChild of null 之所以会发生这种情况，是因为 Twitter 背后操纵了 Ractive 的 DOM。

然而我们跑完之后 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