■表示/非表示
* visible (if) / checked を使用
サンプル
http://kojs.sukobuto.com/docs/if-bindinghttp://tech.aainc.co.jp/archives/5346
より
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<input type="checkbox" data-bind="checked: isVisibleMessage" />
<label for="label">メッセージを表示する?</label>
<div data-bind="visible: isVisibleMessage">表示した？</div>
<div data-bind="if: isVisibleMessage">表示した（ifで）？</div>
<script>
ko.applyBindings({
isVisibleMessage: ko.observable(false)
});
</script>
</body>
</html>
■活性/非活性
* enable / checked を使用http://knockoutjs.com/documentation/enable-binding.html
サンプル
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<input id="r1" type="radio" name="sampleRadio" value="msg1" data-bind="checked: sampleRadioValue" />
<label for="r1">メッセージ1</label><br />
<input id="r2" type="radio" name="sampleRadio" value="msg2" data-bind="checked: sampleRadioValue" />
<label for="r1">メッセージ2</label><br />
<input id="r3" type="radio" name="sampleRadio" value="msg3" data-bind="checked: sampleRadioValue" />
<label for="r1">メッセージ3</label><br />
<br />
<input type="text" data-bind="enable: viewModel.sampleRadioValue() === 'msg1'" value="メッセージ1" /><br />
<input type="text" data-bind="enable: viewModel.sampleRadioValue() === 'msg2'" value="メッセージ2" /><br />
<input type="text" data-bind="enable: viewModel.sampleRadioValue() === 'msg3'" value="メッセージ3" /><br />
<script type="text/javascript">
var viewModel = {
sampleRadioValue: ko.observable('msg1'),
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
ほかにも以下のサイトのように「enable: itemToAdd().length > 0」などして、ボタンを非活性にする等の利用法がある http://kojs.sukobuto.com/tips/betterList
■ループする
* foreach を使用
サンプル
http://madroom-project.blogspot.jp/2014/08/knockoutjsforeach.htmlより
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<ul data-bind="foreach: {data: arrayValues, as: '$arrayValue' }">
<li data-bind="text: $arrayValue"></li>
</ul>
<script>
function ViewModel() {
var self = this;
self.arrayValues = ko.observableArray(['Mike', 'Tom', 'Smith']);
};
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
■他の値の変更を検知して、自身の値を変える場合
* dependentObservable を使用 => 他の値の変更を検知して、自身の値を変えるhttp://qiita.com/tenntenn/items/55fd8fc98cf29b1e43e5
サンプル
http://blog.shibayan.jp/entry/20111208/1323354859より
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<input type="text" data-bind="value: left" /> + <input type="text" data-bind="value: right" /> = <span data-bind="text: answer"></span>
<script type="text/javascript">
var viewModel = {
left: ko.observable(0),
right: ko.observable(0)
};
viewModel.answer = ko.dependentObservable(function () {
return parseInt(this.left()) + parseInt(this.right());
}, viewModel);
ko.applyBindings(viewModel);
</script>
</body>
</html>