刚刚自学knockoutjs，老是碰到稀奇古怪的问题。
在自学knockout.js的时候经常遇到 Unable to process binding "value:的问题。目前总结了以下几种情况：
1.model与view进行binding的时候，与在自己的viewModel中自定义的变量名称不一致；
2.针对全局的html页面进行了多次ko.applyBindings(new Cart());
在这种情况下，可以添加好需要绑定的block对应的id：ko.applyBindings(new Cart(),document.getElementById("block_id"));
3.对页面使用div或者其他元素进行了不同block的划分，比如下面的形式：
<div id="head"> <div></div></div>
<div id="main"> <div></div></div>
<div id="foot"> <div></div></div>
那么在自定义的viewModel中针对这三部分定义三个viewModel，
function headViewModel(){
}
function mainViewModel(){
}
function footViewModel(){
}
然后在js加载时进行三部分的binding：
进行ko.applyBindings(new Cart()，document.getElementById("head"));
ko.applyBindings(new Cart()，document.getElementById("main"));
ko.applyBindings(new Cart()，document.getElementById("foot"));
时，一般不会报unable to process binding的错误。
但是如果你的viewModel中定义了这三部分head、main、foot，但是对应的html页面里缺少head对应的block就会报标题中的错误了。
我按照knockout官网的文档直接拷贝的js代码如下：
1 <script type="text/javascript"> 2 function formatCurrency(value) { 3 return "$" + value.toFixed(2); 4 } 5 6 var CartLine = function() { 7 var self = this; 8 self.category = ko.observable(); 9 self.product = ko.observable(); 10 self.quantity = ko.observable(1); 11 self.subtotal = ko.computed(function() { 12 return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0; 13 }); 14 15 // Whenever the category changes, reset the product selection 16 self.category.subscribe(function() { 17 self.product(undefined); 18 }); 19 }; 20 21 var Cart = function() { 22 // Stores an array of lines, and from these, can work out the grandTotal 23 var self = this; 24 self.lines = ko.observableArray([new CartLine()]); // Put one line in by default 25 self.grandTotal = ko.computed(function() { 26 var total = 0; 27 $.each(self.lines(), function() { total += this.subtotal() }) 28 return total; 29 }); 30 31 // Operations 32 self.addLine = function() { self.lines.push(new CartLine()) }; 33 self.removeLine = function(line) { self.lines.remove(line) }; 34 self.save = function() { 35 var dataToSave = $.map(self.lines(), function(line) { 36 return line.product() ? { 37 productName: line.product().name, 38 quantity: line.quantity() 39 } : undefined 40 }); 41 alert("Could now send this to server: " + JSON.stringify(dataToSave)); 42 }; 43 }; 44 45 ko.applyBindings(new Cart()); 46 </script>html代码如下：
<div class='liveExample' id="div1"> <table width='100%'> <thead> <tr> <th width='25%'>Category</th> <th width='25%'>Product</th> <th class='price' width='15%'>Price</th> <th class='quantity' width='10%'>Quantity</th> <th class='price' width='15%'>Subtotal</th> <th width='10%'> </th> </tr> </thead> <tbody data-bind='foreach: lines'> <tr> <td> <select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category'> </select> </td> <td data-bind="with: category"> <select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select> </td> <td class='price' data-bind='with: product'> <span data-bind='text: formatCurrency(price)'> </span> </td> <td class='quantity'> <input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"' /> </td> <td class='price'> <span data-bind='visible: product, text: formatCurrency(subtotal())' > </span> </td> <td> <a href='#' data-bind='click: $parent.removeLine'>Remove</a> </td> </tr> </tbody> </table> <p class='grandTotal'> Total value: <span data-bind='text: formatCurrency(grandTotal())'> </span> </p> <button data-bind='click: addLine'>Add product</button> <button data-bind='click: save'>Submit order</button> </div>然后就报错了：
Uncaught ReferenceError: Unable to process binding "value: function (){return category }"Message: category is not defined
可是我上面明明定义了。
然后做了一下修改：
将js中的ko.applyBindings(new Cart());修改成ko.applyBindings(new Cart(),document.getElementById("div1"));
就可以了。
问题的原因我还没有深究，但是我知道了在ko.applyBindings的时候，可以养成一个加上banding范围限制的习惯。
转载于:https://www.cnblogs.com/sonofelice/p/4445412.html
相关资源：数据结构—成绩单生成器