【Knockout.js】親の親へのアクセス、デバッガで見るまでもないデータの確認

複雑にネストしたデータを行ったり来たりしていると
今自分のいる場所や操作しているデータがわからなくなってしまいます。
そんな時に役に立つTipsです。

・親の親へのアクセス
$parentではなく$parents配列を利用します

$parents[0] ...親のコンテキストの ViewModel ($parent と同じ)
$parents[1] ...親の親のコンテキストの ViewModel
$parents[2] ...親の親の親のコンテキストの ViewModel

（参考）
Binding context
バインディング・コンテキスト


・デバッガで見るまでもないデータの確認

ちゃちゃっとデータの中身を確認したい時はko.toJSONで見るのが便利でしょうか。
（参考）
Troubleshooting Strategies
Loading and Saving JSON data

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

表題の通り「Knockout.jsでDropDownListの選択値で表示非表示を切り替える」ということをやりたく、
Knockout.jsの公式（または非公式の有志の方の翻訳）にある買い物カゴのデモを元に以下のようなものを作成いたしました。
（iframe中のJSFiddleはhttpsでは機能しないと思います）
jsfiddle

カテゴリーで「Ships」を選択した時はオプションの入力を不可にしたいという要件です。



javascriptの理解が不十分で大分苦労しましたが、29行目

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

で選択した値を元にifバインディングで制御します。
（ちなみに、ifバインディング下の内容は条件に適合しなければ評価されません、
visibleバインディングだと表示されないだけで評価は実行されます）

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

<!-- ko if:typeof(category()) !== "undefined" -->

未選択かどうかを評価することで解消できます。

前述の通りjavascriptの理解が不十分なのでベストな方法ではないかもしれません。
より良い方法をご存知の方がいれば、コメントなど頂けますと幸いです。


（追記）
StackOverFlowに投稿しておいたところより良い方法を教えて頂けたので、
リンクを貼っておきます。
回答くださった方に感謝。