Knockoutjs:unable to process binding "value:

Writing a technical blog is the first step of becoming a dick-wire programmer? Haha, this is my first technical blog.

Just self-taught Knockoutjs, always encounter strange problems.

I copy the JS code directly according to the documents of the knockout website as follows:

1<script type= "Text/javascript" >2         functionFormatCurrency (value) {3             return"$" + value.tofixed (2);4         }5          6         varCartline =function() {7             varSelf = This;8Self.category =ko.observable ();9Self.product =ko.observable ();Tenself.quantity = ko.observable (1); OneSelf.subtotal = ko.computed (function() { A                 returnSelf.product ()? Self.product (). Price * parseint ("0" + self.quantity (), 10): 0; -             }); -           the             //whenever the category changes, reset the product selection -Self.category.subscribe (function() { - self.product (undefined); -             }); +         }; -           +         varCart =function() { A             //Stores An array of lines, and from these, can work out the GrandTotal at             varSelf = This; -Self.lines = Ko.observablearray ([NewCartline ()]);//Put one line on by default -Self.grandtotal = ko.computed (function() { -                 varTotal = 0; -$.each (Self.lines (),function() {Total + = This. Subtotal ()}) -                 returnTotal ; in             }); -           to             //Operations +Self.addline =function() {Self.lines.push (Newcartline ())}; -Self.removeline =function(line) {Self.lines.remove (line)}; theSelf.save =function() { *                 vardataToSave = $.map (Self.lines (),function(line) { $                     returnLine.product ()? {Panax Notoginseng productName:line.product (). Name, - quantity:line.quantity () the }: Undefined +                 }); AAlert ("Could now send this to server:" +json.stringify (dataToSave)); the             }; +         }; -           $Ko.applybindings (NewCart ()); $</script>

The HTML code is as follows:

<Divclass= ' Liveexample 'ID= "Div1">                 <Tablewidth= ' 100% '>                <thead>                    <TR>                        <thwidth= ' 25% '>Category</th>                        <thwidth= ' 25% '>Product</th>                        <thclass= ' Price 'width= ' 15% '>Price</th>                        <thclass= ' Quantity 'width= ' 10% '>Quantity</th>                        <thclass= ' Price 'width= ' 15% '>Subtotal</th>                        <thwidth= ' 10% '> </th>                    </TR>                </thead>                <tbodyData-bind= ' foreach:Lines '>                    <TR>                        <TD>                            <SelectData-bind= ' Options:sampleproductcategories, Optionstext: "Name", Optionscaption: "Select ...", Value:category '> </Select>                        </TD>                        <TDData-bind= "With:category">                            <SelectData-bind= ' Options:Products , Optionstext: "Name", Optionscaption: "Select ...", Value: $parent. Product '> </Select>                        </TD>                        <TDclass= ' Price 'Data-bind= ' with:Product '>                            <spanData-bind= ' Text:formatcurrency (Price) '> </span>                        </TD>                        <TDclass= ' Quantity '>                            <inputData-bind= ' Visible:product, value:quantity, valueupdate: "Afterkeydown"/>                        </TD>                        <TDclass= ' Price '>                            <spanData-bind= ' Visible:product, Text:formatcurrency (Subtotal ()) '> </span>                        </TD>                        <TD>                            <ahref= ' # 'Data-bind= ' click:$parent. Removeline '>Remove</a>                        </TD>                    </TR>                </tbody>            </Table>            <Pclass= ' GrandTotal '>Total Value:<spanData-bind= ' Text:FormatCurrency (GrandTotal ()) '> </span>            </P>            <ButtonData-bind= ' click:AddLine '>ADD Product</Button>            <ButtonData-bind= ' click:Save '>Submit Order</Button>                    </Div>

Then the error is:

Uncaught referenceerror:unable to process binding "value:function () {return category}"
Message:category is not defined

But I have clearly defined above.

Then make a change:

The Ko.applybindings (new Cart ()) in JS is changed to Ko.applybindings (new cart (), document.getElementById ("Div1"));

You can do it.

The cause of the problem I haven't gone into it yet, but I know that when ko.applybindings, you can develop a limit that adds to the banding range.

Knockoutjs:unable to process binding "value: