knockoutと既存UIライブラリの連携

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>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.css">
<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox {{often=='1'?'checked':''}}">
        <input type="radio" id="often-1" class="hidden" name="often" value="1" data-bind="checked:often">
        <label for="often-1">Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox {{often=='2'?'checked':''}}">
        <input type="radio" id="often-2" class="hidden" name="often" value="2" data-bind="checked:often">
        <label for="often-2">2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox {{often=='3'?'checked':''}}">
        <input type="radio" id="often-3" class="hidden" name="often" value="3" data-bind="checked:often">
        <label for="often-3">Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox {{often=='4'?'checked':''}}">
        <input type="radio" id="often-4" class="hidden" name="often" value="4" data-bind="checked:often">
        <label for="often-4">Twice a day</label>
      </div>
    </div>
  </div>
</div>
        
<div class="ui toggle checkbox">
  <input type="checkbox" data-bind="checked:wishNewsletter">
  <label>Subscribe to weekly newsletter</label>
</div>

<hr>
    
<textarea data-bind="value:ko.toJSON($data,null,2)" rows="4"></textarea>

JavaScript

function VM(){
	this.often='2';
    this.wishNewsletter = false;
	ko.track(this);
}

ko.punches.enableAll();
ko.applyBindings(new VM());