Question

我仍然是KnockoutJS的新手，我遇到绑定问题，看不出有什么问题。我尝试过各种各样的东西但似乎没什么用。我敢肯定有一个简单的解决方案，我只是看不到它！

我通过ajax调用数据并尝试从文本框中的数据中显示一个项目，然后可以更新。我在控制台中收到以下错误：

未捕获的ReferenceError：无法处理绑定“with：function （）{return KHAViewModel}“消息：无法处理绑定”： function（）{return fundingWTEResults}“消息：无法处理绑定“textInput：function（）{return ActualFundedWTE}”消息： ActualFundedWTE未定义

下面是我的代码的缩减版本，我已经用一些JS复制了我的ajax脚本。我也在jsFiddle上复制了它：

HTML

<div class="container">
  <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>

<div class="container" id="dateSearch" >
  <h2></h2>
  <form class="form-inline" data-bind="with: KHAViewModel">
    <div class="form-group" data-bind="with: fundedWTEResults">
      <span>Funded WTE: </span>
      <input id="fundedWTE" data-bind="textInput: ActualFundedWTE">
    </div>
  </form>
</div>

JS

// KHA View Model
function KHAViewModel() {
  var self = this;
  self.fundedWTEResults = ko.observableArray([]);

  function fundedWTE (team) {
  //  $.ajax({
  //    url: "/...",
  //    type: "POST",
  //        ...........
  //  });

    var r = [{"Team":team,"ActualFundedWTE":12.00}];
    ko.mapping.fromJS(r, {}, self.fundedWTEResults);
  }

  fundedWTE('TeamA');

}

// Master View Model
function masterVM() {
  var self = this;
  self.KHAViewModel = new KHAViewModel();

};

// Activate Knockout
ko.applyBindings(new masterVM());

Answer 1

看起来@ user3297291已经非常快捷地解决了您的问题。

在调试这些类型的问题时，将帮助您的一个技巧是使用ko.dataFor和ko.contextFor。特别是如果您使用Chrome，控制台上的$ 0指的是开发人员工具中当前选定的元素。

选择要调查的元素，并在开发控制台中输入：

ko.dataFor($0)
ko.dataFor(document.getElementById("fundedWTE")) //Equivalent to this

它将显示该元素被绑定的内容，这通常足以帮助您了解绑定上下文实际上是什么。

ko.contextFor为您提供更多信息，如果您正在使用$ root，$ parent，$ parents等等，那么它将为您提供更多信息。

Answer 2

感谢@ user3297291指出明显的问题。

我使用的with:绑定创建了一个新的binding context，因此后代元素绑定在指定对象的上下文中。所以我的数组仍然是一个对象，因此无法通过所需的方式访问数组中的对象。

要使用的正确绑定是foreach:绑定，foreach绑定会复制数组中每个条目的标记部分，并将该标记的每个副本绑定到相应的数组项。因此，允许我在数组中的每个对象中显示各个值。

还要感谢@Chris在将来使用ko.dataFor()代码分享调试这类问题的好方法。

淘汰赛 - 无法处理绑定 - 使用

2 个答案: