読者です 読者をやめる 読者になる 読者になる

けさらんぱさらん

方向性は定めず、ただ思いつくままに

Knockout.jsのwithを使っていなかったことを後悔している件

Knockout.jsにはwithという制御文があるのですが
今まで使うことは無かったです。
でも絶対使った方が良かったと後悔中

例えばこんな構造のデータあります。

var juchu = {
    juchuNumber: "0001",
    juchuDate: "2013/11/11",
    member: {
        name: "山田太郎",
        tel: "xxx-xxx-xxxx",
        show: ko.observable(false),
        showDetail: function (d, e) {
            d.show(true);
        },
    },
};

受注オブジェクトの中に会員オブジェクトがあります。

これをwithを使わずにバインドするとこんな感じ

<div data-bind="text: juchuNumber"></div>
<div data-bind="text: juchuDate"></div>

<div data-bind="text: member.name"></div>
<a href="#" data-bind="click: member.showDetail">詳細</a>
<!-- ko if: member.show() --> 
<div data-bind="text: member.tel"></div>
<!-- /ko-->

member内のプロパティをバインドするにはmember.を付ける必要があります。
それとshowDetailが実行されたときにも問題が発生します。
f:id:cer1974:20131111231728p:plain:w300
引数で渡されるデータが受注オブジェクトなんですよね
ここは会員オブジェクトが来ることを想定しているのでエラーになります。

そこでwithを使います。

<div data-bind="text: juchuNumber"></div>
<div data-bind="text: juchuDate"></div>

<!-- ko with: member -->
<div data-bind="text: name"></div>
<a href="#" data-bind="click: showDetail">詳細</a>
<!-- ko if: show() --> 
<div data-bind="text: tel"></div>
<!-- /ko-->
<!-- /ko-->

これでshowDetailを実行すると
f:id:cer1974:20131111233910p:plain:w300
会員オブジェクトがちゃんと渡されます。

これですっきりしました。
なんで早く使わなかったかなー