目前,我正在开展的网站使用淘汰赛作为我们的前端框架。我想在不同的页面中将Turbolinks与多个淘汰视图模型结合起来。我遇到的问题是,由于turbolinks实际上并没有改变页面,因此绑定会多次应用,从而导致错误。
到目前为止,这是我尝试过的。
我发现this article描述了我想要做的事情,但并不一定有效。
他的解决方案是用{/ 1>替换ko.applyBindings
window.applyTurboBindings = function(node, viewModelAccessor) {
return $(document).one("page:change", function() {
return ko.applyBindings(viewModelAccessor(), node);
});
};
并将其与此
一起使用applyTurboBindings(document.getElementById('my-node'), function() {
return new MyViewModel();
});
根据他们的文档, page:change
不再是使用turbolinks的方法。所以我尝试使用turbolinks:load
(在初始页面加载后触发一次,并在每次Turbolinks访问后再触发)和turbolinks:visit
(在访问开始后立即触发)。这也不起作用。当我调用方法applyTurboBindings
时,事件永远不会被触发,因此不会应用绑定。
这是一个关于我正在做的基本设置的小提琴。 fiddle
当我通过调试器运行时,applyTurboBindings
从不捕获正在触发的事件(turbolinks:load
)。
我的一个想法是使用这样的东西:
$(document).one("turbolinks:load", function () {
// execute all js for page here
});
而不是典型的
$(function(){
// execute all js for page here
});
但我无法解决这个问题,因为绑定仍然会被多次应用。
所以我的问题是我是如何让这个工作用于多个视图模型所以绑定不会破坏?我应该以不同的方式组织我的js吗?有没有一个简单的解决方案我没有看到或者这不是一个好主意同时使用它们?
这是我关于Stack Overflow的第一个问题,所以如果我错过任何东西或者我没有让我的问题清楚,请告诉我。谢谢你的帮助。