敲除 - 无法处理绑定 - 使用

Question

我对 KnockoutJS 还是相当陌生，我遇到了绑定问题，看不出哪里出了问题。我尝试了各种方法，但似乎没有任何效果。我确定可能有一个简单的解决方案，我只是看不到它！

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

Uncaught ReferenceError: Unable to process binding "with: function (){return KHAViewModel }" Message: Unable to process binding "with: function (){return fundedWTEResults }" Message: Unable to process binding "textInput: function (){return ActualFundedWTE }" Message: ActualFundedWTE is not defined

下面是我的代码的简化版本，我用一些 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 指的是开发人员工具中当前选定的元素。

Select 您要调查的元素并在开发控制台中键入：

ko.dataFor([=10=])
ko.dataFor(document.getElementById("fundedWTE")) //Equivalent to this

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

ko.contextFor 为您提供更多信息，如果您正在使用 $root、$parent、$parents 等，这会很方便

Answer 2

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

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

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

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

敲除 - 无法处理绑定 - 使用

Knockout - Unable to process binding - With

html

javascript

jquery

knockout-mapping-plugin

knockout.js