knockoutjs 'カートエディタ'の例題の質問

Question

私は変数がどのように観察されマッピングされているかを理解しようとしています。 jsfiddleはここにhttp://jsfiddle.net/rniemeyer/adNuR/です。次の2行のjavascriptは、観察のための変数を設定しているようです。

this.category = ko.observable(); 
this.product = ko.observable(); 

この2行はどのようにしてトリックですか？カテゴリと製品をsampleProductCategories []配列にマップする方法をどのように知っていますか？

ありがとうございます。

Answer 1

フィドルはsampleProductCategories配列に住む選択肢のすべてを含むリソースをロードします：http://knockoutjs.com/examples/resources/sampleProductCategories.js

各cartLineオブジェクトは、現在の選択を保持するcategoryとproduct観測されています。

例えば、ここでは個々のcartLineのバインディングのいずれかです。

<select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category' /> 

これは、ドロップダウンのオプションがsampleProductCategoriesから来るべきであると述べています。ボックス内の値はnameプロパティである必要があります。選択が行われたときは、cartLineのcategoryに入力する必要があります。

したがって、選択が行われると、categoryはsampleProductCategories配列からの適切なオブジェクトになりました。

{ 
    "products": [{ 
     "name": "1950's Chicago Surface Lines Streetcar", 
     "price": 26.72 
    }, { 
     "name": "1962 City of Detroit Streetcar", 
     "price": 37.49 
    }, { 
     "name": "Collectable Wooden Train", 
     "price": 67.56 
    }], 
    "name": "Trains" 
} 

さて、のように見える結合2番目のドロップダウン：ような何かカテゴリが選択されている場合

<select data-bind='visible: category, options: category() ? category().products : null, optionsText: "name", optionsCaption: "Select...", value: product' /> 

このバインディングが表示されます。オプションは、選択されたカテゴリのproducts配列に由来します。値を選択すると、観測可能なproductに配列の適切なオブジェクトが設定されます。 Like：

{ 
    "name": "Collectable Wooden Train", 
    "price": 67.56 
} 

したがって、ドロップダウンは連携してネストされたオプションを提供します。