Question

I’m making an AJAX call with JQuery and sending up JSON from an MVC controller. When the success callback runs, I pass it to an observable on my view model. So I have a property on the view model named list, and I send up this JSON:

{ Items: [ { .. }, { .. }] }

The template and container looks like:

<div data-bind="template: {name:'Template', data:list}"></div>

<script type="text/html" id="Template">
    <section class="List">
            <ul id="MyList" data-bind="foreach:Items">

I try to bind this to a view, and I get an error:

Microsoft JScript runtime error: Unable to parse bindings.
Message: ReferenceError: 'Items' is undefined;
Bindings value: foreach:Items

Items is correct, it’s getting assigned to the view model correctly, and I verified the Items property is really not undefined. I have the same exact code in another view, and yet it works there and not here. Any idea why, and what this error is caused by?

EDIT: I have a view model that looks like, and is bound to, like so:

function viewModel() {
   var self = this;
   self.list = ko.observable(null);
}

$.ajax({
.
.
   context: model, //reference to view model, which is a valid reference
   success: function(d) {
     this.list(d);  //d is JSON laid out above
   }
});

Thanks.

Answer 1

The following should work:

<div data-bind="template: {name:'Template', data:list}"></div>

<script type="text/html" id="Template">
    <section class="List">
            <ul id="MyList" data-bind="foreach:Items">
                <span data-bind="text: value"></span>
            </ul>
    </section>
</script>

And then use this as your javascript:

function viewModel() {
   var self = this;
   self.list = ko.observable();

   self.init = function()
   {
       var data = { Items: [ { value: 1 }, { value: 2 }] }
       self.list(data);
   };

   self.init();
}

ko.applyBindings(new viewModel());

Inside the init function you execute your ajax call and bind the data.