Javascript 删除绑定在历史返回后解除绑定

我正在使用knockout和rails 4构建一个web应用程序。我有一个家庭控制器来为主要的HTML和javascripts服务。 在application.js.erb中，我声明了我的viewModel：

var appViewModel = function appViewModel(){
    var self = this;
    self.navLinks = ['whoarewe','business'];
}

$(document).ready(function() {
    ko.applyBindings(new appViewModel());
});

home/index.html.erb看起来是这样的：

<div class="app_navbar">
    <ul class="navLinks">
        <!--ko foreach:navLinks-->
        <li><a data-bind="text: $data"></a></li>
        <!--/ko-->
    </ul>
</div>

<%= video_tag "Student_Resume1.mp4", :size => "320x240", :controls => true, :autobuffer => true %>

“320x240”，：controls=>true，：autobuffer=>true%>

当我通过普通浏览器请求（从URL文本框输入）或刷新从服务器请求页面时，它工作正常。 我的问题是，当我切换到另一个页面并使用浏览器历史记录返回主页/索引（定义了敲除模型）时，我得到的html没有敲除绑定

有什么东西是我忽略的吗

更新：

调试后（返回历史记录），我可以看到document.ready方法被调用，applyBindings方法也被调用，加载所有的敲除绑定。
看起来并不是所有的静态内容都像图片一样被加载了。只有在jQuery completed（）方法完成后，才会加载缺少的静态内容，并撤消所有绑定

更新2：

在进一步挖掘之后（对html进行二进制搜索，每次删除一半代码以查看包是否被删除），我发现从html中删除一些元素可以解决问题（引导标签和视频标签）。标签可能会导致引导或其他未报告的错误，这是有道理的，但我不明白的是为什么视频标签会导致它。 视频标签非常简单，如下所示：

<video>
    <source src="/assets/Student_Resume1.mp4" type='video/mp4' />
</video>

移除它可以解决问题；添加它会产生某种错误（我假设）。使用历史记录返回（仅）时，不会显示视频，并且淘汰绑定失败

更新3：

移除视频标签也不能解决问题，它只会降低发生的可能性。 这使我认为这可能是由于页面过载或某种竞争条件造成的

更新4：

我注意到再次从chrome控制台窗口调用ko.applyBindings，可以毫无问题地重新绑定绑定。因此尝试将applyBindings移动到$（window）.load，但未成功

更新5：

我还注意到，历史回溯后，视频标签不起作用。chrome中的网络选项卡有3个视频请求。2得到以下响应304未修改，第3个没有得到重播

更新6：

---

在使用更多浏览器进行测试后，firefox中似乎没有出现这种情况。由于firefox不支持mp4，视频也没有加载。

在application.js中使用js依赖项后， 我注意到删除TurboLink（在rails 4应用程序中是defualt）完全解决了这个问题，我通过从application.js中删除以下行将其删除：

//= require turbolinks

绑定也可以工作。 再调查一下，我发现了这个 该条规定：

“在JavaScript中使用document.ready时会出现一个问题，即 事件仅在DOM完成加载时触发，但不会触发 Turbolinks执行页面更改时触发。“

我知道Turbolinks的常见行为是在jquery就绪方法之后更改页面状态，而我的ApplyBinding没有在正确的时间（正常的jquery就绪）应用，在执行历史记录后

为了正确触发applyBindings，我还必须将函数绑定到“page:load”

所以我再次向application.js和 更改了正常的$（文档）。准备如下所示：

var ready = function(){
    ko.applyBindings(new appViewModel());
};

$(document).ready(ready);
$(document).on('page:load', ready);

并正确应用绑定

进一步阅读：

---

作为一个调试步骤：在页面中添加一个div，比如在视频标签后面，并给它一个唯一的id，

foo

。然后，在调用

applyBindings

之后，设置

window.theInitialElement=document.getElementById（'foo'）

。加载页面后，如果似乎尚未应用绑定，请在控制台中运行

document.getElementById（'foo'）==window.theInitialElement

。如果页面上仍然只有一个

foo

，但它是一个不同的foo，那么可能有一些代码正在执行

body.innerHTML=body.innerHTML

或类似的疯狂操作，这会破坏页面。在历史记录（失败）和直接请求（有效）两种情况下都尝试过document.getElementById（'foo'））===window.theInitialElement返回true。奇怪，不确定它可能是什么。不确定在应用了绑定的ApplyBinding之后，它如何会出现在页面上，然后在没有应用任何绑定的情况下，相同的元素仍然会出现在页面上。可能需要看一个（最少的）演示才能解决问题。更新问题，尽可能减少不必要的代码。结帐更新5。