【knockout.js】 knockout.js ～基礎編～ [1]

knockout.js

  はじめに

 * 以下の関連記事の続き。今回は、よく使う基本的な事項をまとめる。
http://blogs.yahoo.co.jp/dk521123/35664953.html

 

  ■表示/非表示

 * visible (if) / checked を使用

  サンプル

http://kojs.sukobuto.com/docs/if-binding
http://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'>
</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'>
</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'>
</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>

 

  ■SELECTタグに対するバインディング

  サンプル

SELECT BOX
http://jsfiddle.net/MikeEast/nM6dd/2/
より 
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'>
</head>
<body>
<div>
<select data-bind="options: items, optionsText: 'name', value: selected"></select>
<span data-bind="text: selected().name"></span>
<script type="text/javascript">
var ViewModel = function () {
   this.items = ko.observableArray([
       { id: 1, name: "Mike" }, 
       { id: 2, name: "Tom"},
       { id: 3, name: "Smith"}
   ]);
   this.selected = ko.observable();
};

ko.applyBindings(new ViewModel());
</script>
</body>
</html>

 

  サンプル

SELECT BOX/multiple 
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'>
</head>
<body>
<select size="5" multiple
 data-bind="options: array, selectedOptions: selectedArray"></select>
<script>
    var viewModel = {
        array: ['Japan', 'USA', 'UK', 'China', ''],
        selectedArray: ['USA', 'China']
    };

    ko.applyBindings(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'>
</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>

 

  関連記事

  knockout.js ～入門編～

http://blogs.yahoo.co.jp/dk521123/35664953.html

  knockout.js ～構文編～

http://blogs.yahoo.co.jp/dk521123/35679484.html