【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に投稿しておいたところより良い方法を教えて頂けたので、
リンクを貼っておきます。
回答くださった方に感謝。