敲除js视图模型中的window.location不起作用答案

【问题标题】：window.location inside knockoutjs viewmodel not working敲除js视图模型中的window.location不起作用
【发布时间】：2013-03-11 22:31:14
【问题描述】：

我有以下几点：

HTML

<div id="documentsList" data-bind="foreach: documents">
   <span class="ui-icon ui-icon-document" data-bind="click: $root.onViewDocumentClick"></span>
</div>

JAVASCRIPT

documentViewModel = new function() {
   var self = this;
   self.documents = ko.observableArray([]); //Loaded elsewhere
   self.onViewDocumentClick = function(data) {
      var path = "/ViewDocument/0";
      var url = path.replace("/0","/" + data.Id.ToString());
      window.location = url;
   }
}

$(function() {
   $ko.applyBindings(documentViewModel,$("#documentsList")[0]);
  });

我的问题是，一旦加载了文档并单击图标，页面就会重新加载，但它表明页面实际上正在尝试重新加载 /ViewDocument/undefined ...这当然会引发错误，因为该页面不存在。

如果我进行以下更改以通过 jQuery 而不是 Knockout 处理单击事件，那么一切正常。

HTML

<span class="ui-icon ui-icon-document" data-bind="text: Id"></span>

JAVASCRIPT

$("#documentsList").on("click","span.ui-icon-document",function() {
      var path = "/ViewDocument/0";
      var url = path.replace("/0","/" + $(this).text());
      window.location = url;
});

我错过了什么？

编辑这是演示我的问题的小提琴：Fiddle Example 如果您将 div 的名称更改为 documentList2，您将看到正确的行为。如果您将其保留为 documentList，您将看到错误。 请务必在更改 div 名称后运行

【问题讨论】：

window.location 不是你的问题。 data.Id.ToString() 似乎正在返回 undefined。
不，我在数组中的对象不是可观察的，也没有可观察的属性。见上面的小提琴。
你的小提琴之前似乎工作正常，特别是如果我将 URL 更改为使用data.id，因为那是具有路径的部分：jsfiddle.net/jtbowden/CQS5q/1
对不起，午饭前我赶时间。这是一个更新的小提琴：jsfiddle.net/LzFx6/3。顶部列表中的项目返回错误。底部列表中的项目有效。（在 Chrome 中运行）
我还是不明白你为什么用data.name。 data.name 包含“Fiddle 1”和“Fiddle 2”，这不是您想要的。你想要data.id。

标签： javascript jquery knockout.js

【解决方案1】：

您确定在您的文档对象中定义了Id 吗？ /ViewDocument/undefined 似乎表明 data.Id.ToString() 正在解析为 undefined。

我在这里整理了一个小提琴，当我在文档对象中定义 Id 时，它似乎可以正常工作：

http://jsfiddle.net/jtbowden/gf9QT/

出于显而易见的原因，我注释掉了 window.location 行，但我可以在调试控制台中清楚地看到它正在尝试访问正确的 URL。

【讨论】：

Id 是明确定义的。我已经通过调试器（chrome）并在 window.location 之前添加了一个警报以显示 url 的值并正确显示。

【解决方案2】：

我不知道是不是笔误，但它是“toString()”而不是“ToString”

var url = path.replace("/0","/" + data.Id.ToString());

应该是

var url = path.replace("/0","/" + data.Id.toString());

【讨论】：

【解决方案3】：

事实证明，我在 documentList 元素上还有两个点击绑定（绑定到其他子元素）。但是，这些是在 window.location 生效之前触发的。因此，当 window.location 能够执行时，url var 已超出范围。

【讨论】：