knockout.js よく使うbindingのパターン

この記事ではknockout.jsでよく使うbindingのパターンを列挙しました。knockout.jsの使い方にある程度理解のある方が、久しぶりに使うときに思い出すための備忘録として活用いただければ幸いです。またjQuery文法の利用を前提としています。

基本

<div id="container"></div>
<script>
var vm = {};
vm.name = ko.observable("abcde");
vm.email = ko.computed(function(){
  return vm.name() + "@gmail.com";
});
vm.isProgrammer = ko.observable(true);
vm.job = ko.observable("job");
vm.languages = ko.observableArray([
  {value:"jp", label:"Japanese"},
  {value:"en", label:"English"}
]);
vm.language = ko.observable("jp");
ko.applyBindings(vm, $("#container")[0]);

</script>

text, html

<div data-bind="text:email"></div>
<div data-bind="html:name"></div>

value

<input type="text" data-bind="value:name" />
<textarea data-bind="value:name" />

checked

<input type="checkbox" data-bind="checked:isProgrammer" />

<input type="radio" name="job" value="programmer" data-bind="checked:job"/>
<input type="radio" name="job" value="tester" data-bind="checked:job"/>

options, optionsText, optionsValue

<select data-bind="value:language, options:languages, 
 optionsValue:'value', optionsText:'label' />

attr

<a data-bind="attr:{href:'www.google.com'}}></a>

jqueryui

<button type="button" data-bind="jqueryui:{widget:'button', 
 options:{disabled:!dirty()}}, click:save">保存する</div>

別途、jquery-ui(jqueryのui部品), knockout-jquery-ui-widget.js(knockoutjs拡張)が必要です。
https://jqueryui.com/
https://gist.github.com/medmunds/889400