Knockoutjs ： Unable to process binding "value:

刚刚自学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代码如下：

    <script type="text/javascript">
        function formatCurrency(value) {
            return "$" + value.toFixed(2);
        }
         
        var CartLine = function() {
            var self = this;
            self.category = ko.observable();
            self.product = ko.observable();
            self.quantity = ko.observable(1);
            self.subtotal = ko.computed(function() {
                return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
            });
         
            // Whenever the category changes, reset the product selection
            self.category.subscribe(function() {
                self.product(undefined);
            });
        };
         
        var Cart = function() {
            // Stores an array of lines, and from these, can work out the grandTotal
            var self = this;
            self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
            self.grandTotal = ko.computed(function() {
                var total = 0;
                $.each(self.lines(), function() { total += this.subtotal() })
                return total;
            });
         
            // Operations
            self.addLine = function() { self.lines.push(new CartLine()) };
            self.removeLine = function(line) { self.lines.remove(line) };
            self.save = function() {
                var dataToSave = $.map(self.lines(), function(line) {
                    return line.product() ? {
                        productName: line.product().name,
                        quantity: line.quantity()
                    } : undefined
                });
                alert("Could now send this to server: " + JSON.stringify(dataToSave));
            };
        };
         
        ko.applyBindings(new Cart());
    </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范围限制的习惯。