Knockout - Unable to process binding - With

Question

I'm still reasonably new to KnockoutJS, I am having an issue with binding and cannot see what is wrong. I have tried various things but nothing seems to work. I'm sure there is probably a simple solution, I just can't see it!

I am calling data via ajax and trying to display one item from the data in the textbox, which then can be updated. I'm getting the following error in the console:

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

Below is a cutdown version of my code and I have replicated my ajax script with some JS. I have also replicated it on 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());

I think the with: fundedWTEResults binding should be a foreach: fundedWTEResults binding, since it's an array... — user3297291
@user3297291 do you want to leave an answer? or I can answer it. — ASindleMouat
Thanks for giving me the opportunity to add an answer, but I'm okay with you adding your own answer since it's such a minor fix :) — user3297291

Chris Chris · Accepted Answer · 2017-05-24T10:47:19

It looks like @user3297291 has solved your issue with remarkable alacrity.

One tip that will help you in future when debugging these types of problem is using ko.dataFor and ko.contextFor. Especially if you're using Chrome where on the console $0 refers to the currently selected element in the Developer Tools.

Select the element you want to investigate and in the dev console type:

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

It will display what that element is being bound to which is usually sufficient to help you get your head around what the binding context actually is.

ko.contextFor gives you even more information, handy if you're playing with $root, $parent, $parents etc.

Knockout - Unable to process binding - With

2 Answers