LoginSignup
5

More than 5 years have passed since last update.

knockoutのbinding

Posted at
この記事は、knockout.js Advent Calendar 2015の4日目の記事です。 先に3日目に目を通すことを推奨しています。
knockout , knockout-es5 , knockout.punches環境を想定しています。

knockoutのbindingは、HTMLテンプレートにdata-bind="attr:properties"の形式で書きます。
これまでのサンプルでも、data-bind="submit:handler"や、data-bind="value:model"といった具合で使ってきました。

その他にもさまざまなbindingがあるので、それらの一部を紹介します。(ただし詳しいリファレンスは外部リンクです)

  • value

    data-bind="value:property": 解説(公式日本語
    フォーム要素からの入力(View) と ViewModelの値 を紐づけます。

  • textInput

    data-bind="textInput:property": 解説(公式日本語
    フォーム要素のinput[type="text"]や、textareaからの入力(View) と ViewModelの値 を紐づけます。
    valueとの違いは、valueのモデル変更検知のタイミングは、入力コントロールからフォーカスが外れるタイミングなのにたいして、
    textInputは、キーが押されたタイミングに変更検知が実行される という点です。
    つまり、data-bind="textInput:property"data-bind="value:property,valueUpdate:'afterkeydown'`"と動きが似ています。(←等価であるかどうかは未確認)

  • checked

    data-bind="checked:property": 解説(公式日本語
    input[type="checkbox"]input[type="radio"]で、項目が選択されているかをbindingします。
    radioボタンであれば、択一なのでpropertyは配列ではなくただの変数を利用しますが、
    チェックボックスであれば任意の数が選択されることが想定されているので、propertyには配列[]を指定することになるでしょう。
    もちろん、チェックボックスであっても択一の(ON/OFF)であれば、配列である必要はありません。

  • click

    data-bind="click:handler": 解説(公式日本語)
    マウス等でのクリックイベントハンドラ:handlerは任意の関数の名前を指定。handlerには、(data , event)が渡されます。

  • on.click

    data-bind="on.click": 解説
    knockout.punchesによって追加される構文糖衣の、式ベースのイベントハンドラです。
    click以外のハンドラも定義することが出来ます。
    data-bind="click:handler"はhandlerがfunctionである必要がありますが、
    data-bind="on.click:expression"はexpressionに任意の式が書けます。 式にfunctionの呼び出しコードもかくことができるので、
    data-bind="on.click:handler(parameter)"のように、handlerに任意の引数を渡すこともできます。

  • attr

    data-bind="attr:properties": 解説(公式日本語)
    htmlの属性(attr)へdata-bindを設定するものです。
    例えば、data-bind="attr:{src:'http://example.com/'+imgfile}"とすれば、
    imgのsrcを動的に設定できます。
    ただし、knockout.punchesを導入している際にはimgのsrcなど、外部リソースへの参照用くらいにしか使わないと思います。
    なぜなら、html <i class="fa fa-{{icon}}"></i>の構文糖衣が利用可能だからです。
    これは、
    <i data-bind="attr:{'class':'fa fa-'+icon}"></i>と等価です。

  • style

    data-bind="style:{}": 解説(公式日本語
     htmlのstyle属性へのdata-bindを設定するものです。
    例えば、data-bind="style:{color:gender=='M'?'blue':'red'}"とすれば、
    viewmodelのgenderがMであれば、文字をblueに、そうでなければredに、という感じで利用します。


これらの(一部)をつかったサンプルは、こんな感じになります。

index.html
<h1>User Info</h1>
<dl>
    <dt>指名</dt>
    dd><input type="text" data-bind="value:name,style:{color:gender=='M'?'blue':'red'}" /></dd>

    <dt>年齢</dt>
    <dd><input type="number" data-bind="value:age" /></dd>

    <dt>性別</dt>
    <dd>
        <label><input type="radio" name="gender" value="M" data-bind="checked:gender" /></label>
        <label><input type="radio" name="gender" value="F" data-bind="checked:gender" /></label>
        <label><input type="radio" name="gender" value="O" data-bind="checked:gender" /></label>
    </dd>

    <dt>属性</dt>
    <dd>
        <label><input type="checkbox" data-bind="checked:married" />既婚</label>
    </dd>
</dl>

<hr>
JSONにすると・・・・<br>
<textarea data-bind="text:ko.toJSON($data,null,2)" rows="6"></textarea>
script.js
function UserInfo(options){
    this.name = options.name;
    this.age = options.age;
    this.gender = options.gender;
    this.married = options.married;
    ko.track(this);
}

ko.punches.enableAll();
ko.applyBindings(new UserInfo({
    name: "山田",
    age:36,
    gender:"M",
    married: true
}));

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5