Question

I’m creating an app using the very slick KnockoutJS library, but I’ve run into a snag. On the html page, I have a plain <select> control that I want to load with JSON data returned from a web service.

I define the observable array as follows:

var laborRow = function () {
    this.positions = ko.observableArray([]);
};

When the page loads, the ajax call is made and the data is returned. In the callback, I do the following:

    success: function (msg) {
        laborRow.positions = msg;
    }

based on the KO docs, I would expect that I would set the result like this:

laborRow.positions(msg);

However, that just throws an error stating that “laborRow.positions in not a function”

The template in the html is as follows:

<tbody data-bind='template: {name: "laborRowTemplate", foreach: laborLine}'> </tbody> 
</div>
  <script type="text/html" id="laborRowTemplate"> 
        <tr>

          <td><select data-bind='options: positions, optionsText: "Title", optionsCaption: "select", value: selectedPosition '></select></td>

        </tr>
    </script>

The laborRow object is a property on the ViewModel which is bound to the page. For whatever reason, this does not work. To add another wrinkle, if I add code to peek into the observableArray and print out some piece of data, the data is in there. So it is being loaded successfully.

Any thoughts would be greatly appreciated.

The full code for my example case:

var laborRow = function () {
    this.positions = ko.observableArray([]);    
};

var projectEstimate = function () {
    this.laborLine = ko.observableArray([new laborRow()]);

};

var projectViewModel = new projectEstimate();
ko.applyBindings(projectViewModel);

//and the code in the callback function on ajax success

 success: function (msg) {
                laborRow.positions = msg;
                //laborRow.positions(msg); **this does not work - error is laborRow.positions is not a function**
            },

And the html:

 <tbody data-bind='template: {name: "laborRowTemplate", foreach:
laborLine}'> </tbody>

  <script type="text/html" id="laborRowTemplate">
        <tr>
          <td><select data-bind='options: positions, optionsText:
"Title",  optionsCaption: "select", value: selectedPosition '></
select></td>

        </tr>
    </script> 

Finally, thanks to Sean’s comments below, I was able to get it working by modifying the code in the callback as follows:

success: function (msg) {
    projectViewModel.laborLine()[(projectViewModel.laborLine().length-1)].positionList(msg);
}

Answer 1

The problem is that you haven’t actually created your model:

var laborRow = function () {
    this.positions = ko.observableArray([]);
    // will only be called if you call var some_var = new laborRow()
};

Change your function to a bare object (as shown in the Knockout docs):

var laborRow = {
    positions: ko.observableArray([])
};

And you’ll be able to call laborRow.positions(msg); and have it work.

---

EDIT

Based on the new code, laborRow is still not instantiated — if you are setting var laborRow somewhere else in your code (around the ajax request, perhaps) then you’ll want to make sure that your call stack looks like this:

projectViewModel.laborLine()[0].positions() 
// This will return the array you're looking for.
// The key is that laborLine is a `getter` not an attribute

I’ve been bitten by the “ko variables are getters not attributes” bug on several occasions … might that be happening with your code?