Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

knockoutのbinding

More than 5 years have passed since last update.
この記事は、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
}));
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away