knockout.jsを利用した見積りフォーム

質問

knockout.jsから自動見積りフォームを作成したのですが、どうしてもわからない部分があってご教授いただければ、と投稿させていただきました。

http://jsfiddle.net/ct1fxm6x/

こちらに作成したコードを記述しています。見栄えのため色をつけています。

パターン１
サービス１つ１つにコストを割り当て文字数と掛け合わせて価格を計算しています。１日の仕事量を割って納期を出しています。

パターン２
同様にコストを割り当てて価格を出しています。また、割引サービスが適用されるので分量で割引されるようにしています。納期は文字数で替わるようにしています。

※変更したい部分

パターン１
「サービス１」を選択した時に日にちがinfinityと表示されてしまうのですが、「サービス１」を選択したときのみ文字数に関係なく７日を表示するようにしたい。エコノミー以下はこのまま計算された状態を保ちます。

■「サービス１」を選択したら他サービスでは表示されていた納期のテーブルを非表示にし、代わりにdisplay等で非表示にしていた納期7日を表示するようにしたらどうか、と考えたのですがknockout.jsでは普通のjavascriptのようにdisplayでの切り替えは可能なのでしょうか。

パターン２
納期の部分に「スタンダード」「エクスプレス」の両方が表示されているのですが、プルダウンメニューで「スタンダード」を選択した時はスタンダードの納期を、「エクスプレス」を選択した時はエクスプレスの納期を表示するようにしたい。

■こちらも片方をdisplayで非表示にして切り替える方法を考えました。

displayの表記を試してみたのですがコードが間違っているのかプルダウンメニューが機能しなくなってしまいます。
初心者でコードも理解の届いていない部分もあり考え方も間違っているかもしれませんが、ヒントでも教えていただければと思います。

よろしくお願いいたします。

回答No.1

shockatz

ご提示になっている内容は、表示を切り替えなくとも、ComputedObservable で制御できる内容です。
また、（薦めませんが）ご提示のようにあらかじめ表示要素を用意しておき、その可視性を切り替えるのであれば、visible バインディングや、css バインディングが使えますので、さほど苦労なく実装することができるかと思います。

> 普通のjavascriptのようにdisplayでの切り替え

というのは、javascript で CSS の diplay 属性値を none などに直書きする、といった意味に受け取れますが、コードの改良や再利用性を考えると、 knockoutjs を使う以前に、かなり力攻めの泥臭い方法論だと思います。

そういう発想そのものが knockout 的な「ビューモデルによる UI 反映自動化」という理念にそぐわない、と思うのですが。

お礼

ご回答ありがとうございます。

term1においてComputedObservableのifで区切られている部分を追記するという考え方で間違っていないでしょうか。
なんとなくのイメージは出来上がったのですが相変わらず記述方法がわからない状態です。
ComputedObservableでの記述方法を調べてみます。

貴重なご意見をありがとうございました。

補足

あれから試してみたのですがわからない部分がまた出てきてしまいました。

if(!vm.selectedService())return null;の下に
elseif if(!vm.selectedService(name==サービス名))return以下 ;
と記述するもの

スタンダード<span data-bind="text: (name=='スタンダード' ? term1 : term2)">
と記述するもの

以上の２つを考えてみました。
下のものですとエラーにはならなかったのですがterm2の結果しか表示されませんでした。

エラーにならなかっただけ少しは前進したのかなと思っているのですが間違っている部分はありますでしょうか。参考書は出ていないようでしたのでネットでできるだけ調べてはみたのですがここまでしか理解が及びませんでした。

大変ご迷惑なのですがあと少しだけヒントをいただけないでしょうか。　よろしくお願いいたします。