knockoutのbinding

Knockout Advent Calendar 2015

by MKGaru

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://mbest.github.io/knockout.punches/knockout.punches.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout-es5/master/dist/knockout-es5.js"></script>
<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>

JavaScript

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
}));