Question

我有以下内容：

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进行以下更改来处理click事件，那么事情就可以了。

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名称后运行

Answer 1

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

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

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

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

Answer 2

我不知道它是否是拼写错误，但它是“toString（）”而不是“ToString”

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

应该是

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

Answer 3

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

window.location里面的knockoutjs viewmodel无法正常工作

3 个答案: