Question

defining two FOREACHs in two different DIVs as follow

<div style="background-color:black; color:white; overflow:scroll; height:350px;width:300px">
<ol data-bind="foreach: price_quantity">
<li data-bind="text: quantity + ' &&& ' + price"></li>
</ol>
</div>
<div style="background-color:black; color:white; overflow:scroll; height:350px;width:300px">
<ul data-bind="foreach: papers" style="list-style-type:none">
<li>
<div data-bind="text: paperName"></div>
<ul data-bind="foreach : _colors" >
<li>
<div data-bind="style:{'background-color' : colorName}" style="height:25px;width:25px;border:1px solid white"></div>

</li>
</ul>
</li>
</ul>
</div>

and on $(document).ready, I am making two AJAX calls as below to populate two divs above with LIST

<script type="text/javascript">
$(document).ready(function () { 

   var sku = "abcd";               
   $.ajax({
       url: "/api/values?clientSKU=" + sku,
       dataType: "json",
       asyc: true,
       type: "get",
       success: function (msg) {
                var skuandprice = $.parseJSON(msg);          
                ko.applyBindings(new ViewPriceObjectOnWeb(skuandprice));
       },
       error: function (jqXHR, textStatus, errorThrown) {
               alert(textStatus + '  ' + errorThrown);
       }
   });
   var appid= "123";     
   $.ajax({
       url: "/api/Default1?app_id=" + appid,
       dataType: "json",
       asyc: false,
       type: "get",
       success: function (msg) {
                var paperandcolors = $.parseJSON(msg);                       
                ko.applyBindings(new PaperModal(paperandcolors));
       },
       error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus + '  ' + errorThrown);
       }
   });

});

function ViewPriceObjectOnWeb(d) {
this.price_quantity = ko.observableArray(d);
}

function PaperModal(paperArr) {
this.papers = ko.observableArray(paperArr);
}

if I run them by commenting one or other DIV and not make corresponding call, it works fine.

When Page Loads with both DIVS and their LISTS insided them, it gives error of

Unable to parse bindings.
Message: ReferenceError: ‘price_quantity’ is undefined;
Bindings value: foreach: price_quantity

Why this won’t work? Any help is greately appreciated.

Answer 1

When you apply bindings more than once you need to specify which DOM element it will be referred to. In you case you need to do:

ko.applyBindings(new ViewPriceObjectOnWeb(skuandprice), document.getElementById("divQuantity"));

and the HTML is:

<div id="divQuantity" style="background-color:black; color:white; overflow:scroll; height:350px;width:300px">
<ol data-bind="foreach: price_quantity">

The same with the second binding.

But actually I would suggest to separate the binding from the updating the model. It means that you will call this binding code separately somewhere before any loading of data. And when you load data you only need to update the model:

var ViewPriceObjectOnWeb = function()
{
var self = this;
self.price_quantity = ko.observableArray(0);
};
...
var priceObject = new ViewPriceObjectOnWeb();
ko.applyBindings(priceObject, document.getElementById("divQuantity"));
...
$.ajax({
       url: "/api/values?clientSKU=" + sku,
       dataType: "json",
       asyc: true,
       type: "get",
       success: function (msg) {
                priceObject.price_quantity = $.parseJSON(msg);          
       },
       error: function (jqXHR, textStatus, errorThrown) {
               alert(textStatus + '  ' + errorThrown);
       }
   });

The knockoutjs is so smart so it will update the DOM element as soon as model is updated.