Knockout.jsでDropDownListの選択値で表示非表示を切り替える


はじめて質問いたします。（質問の方法に不備などありましたら申し訳ありません）

[公式のサンプル](http://kojs.sukobuto.com/tips/cartEditor)を元に以下のようなページを作成いたしました。  
[jsfiddle](http://jsfiddle.net/2ndground/3yf30wxv/)

「カテゴリ」のDropDownListで「Ships」を選択した時に  
「オプション」の項目は非表示にしたいのですが、  
Viewの28行目

[code]

    <!-- ko ifnot:category.name==='Ships'-->
    
[/code]

ではうまく機能しません。

強引に

[code]

    <!-- ko ifnot:JSON.parse(ko.toJSON(category,null,4)).name == 'Ships'  -->
    
[/code]

のような事をすると「Ships」を選択した時に一応表示されなくはなるのですが、  
・「カテゴリ」が未選択の時にエラーになる  
・「追加」ボタンが機能しない  
などの問題が生じてしまいます。

[code]

    <!-- ko with:category -->
    <!-- ko ifnot:name==='Ships'-->
    
[/code]

とすると、配下のコードが機能しなくなってしまいます。

そもそも根本的に理解ができていないような気が致しますが、ご指導頂けますと幸いです。  
どうぞよろしくお願い致します。




>
[code]

>     <!-- ko if:typeof(category()) !== "undefined" -->
>     <!-- ko if:ko.toJS($data).category.name !== 'Ships' -->
>  
[/code]

categoryはobservableですから中身を取得するにはcategory()とする必要があります。

[code]

    !-- ko if:category().name !== 'Ships' -->
    
[/code]

未選択の場合はcategoryの中は空ですから、最終的な条件は『catrogry()の中身があり かつ その中身がShipsでない』

[code]

    !-- ko if:category() && category().name !== 'Ships' -->
    
[/code]




自己レスいたします。

一応意図通りに動くコードに変更することはできました。  
[jsfiddle](http://jsfiddle.net/2ndground/bdhdd8au/)

29行目

[code]

    <!-- ko if:ko.toJS($data).category.name !== 'Ships' -->
    
[/code]

でDropdownListで選択した値を取得し、制御することができました。

これだけでは未選択の時に「0x800a138f - JavaScript 実行時エラー: 未定義または NULL 参照のプロパティ 'name'
は取得できません」とのエラーが出てしまいます。

その前に

[code]

    <!-- ko if:typeof(category()) !== "undefined" -->
    
[/code]

で未選択かどうかをチェックすることができました。

javascriptの理解が至らないため良い解決方法かわかりません。  
より良い方法や設計などあればご指摘頂けますと幸いです。

