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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.js"></script>
<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox" data-bind="checkbox:{}">
        <input type="radio" name="often" value="1" data-bind="checked:often">
        <label>Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox" data-bind="checkbox:{}">
        <input type="radio" name="often" value="2" data-bind="checked:often">
        <label>2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox" data-bind="checkbox:{}">
        <input type="radio" name="often" value="3" data-bind="checked:often">
        <label>Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox" data-bind="checkbox:{}">
        <input type="radio" name="often" value="4" data-bind="checked:often">
        <label>Twice a day</label>
      </div>
    </div>
  </div>
</div>
        
<div class="ui toggle checkbox" data-bind="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.bindingHandlers['checkbox'] ={
	init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.unwrap(valueAccessor())||{};
		if(!options.onChange){
            options.onChange = function(){
                $(this).triggerHandler('click');
            };
        }
        $(element)['checkbox'](options);
	}
};

ko.applyBindings(new VM());