Knockout.js入門 - Developer Note

Knockout.js とは？
Knockout.js を使ってみる
1. ViewModel のプロパティを View に表示する
2. View のイベントを検知し ViewModel のプロパティを更新する

Knockout.js とは？

データバインド機能を提供する JavaScript ライブラリです。
http://knockoutjs.com
非常に軽量で、jQuery と競合しません。
公式サンプルが充実しているので、取っ付きやすいです。

Knockout.js を使ってみる

ViewModel のプロパティを View に表示する

Knockout では ko.applyBindings で View に ViewModel をバインドさせます。

let viewModel = {
    msg: "Hello Knockout World!"
};

window.onload = function () {
    ko.applyBindings(viewModel);
}

画面で ViewModel のプロパティを表示してみます。

<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script type="text/javascript" src="simpleBindingViewModel.js"></script>
</head>

<body>
    <div data-bind="text: msg"></div>
</body>

</html>

See the Pen KnockoutSimpleBinding by mt (@mtakeda) on CodePen.

Hello Knockout World! と表示されます。

View のイベントを検知し ViewModel のプロパティを更新する

更新するプロパティを observable とします。
プロパティを取得するには引数なしの observable を呼びます。
プロパティを更新するには、引数に新しい値を入れ observable を呼びます。

var viewModel = {
    clickedCount: ko.observable(0)
};

function countUp() {
    cnt = viewModel.clickedCount();
    viewModel.clickedCount(cnt + 1);
}

window.onload = function () {
    ko.applyBindings(viewModel);
}

ボタンに関数がバインドされます。

<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script type="text/javascript" src="countUpViewModel.js"></script>
</head>

<body>
    <div><button data-bind="click: countUp">Click Me!</button></div>
    <div>Clicked Count: <span data-bind="text: clickedCount"></span></div>
</body>

</html>

See the Pen KnockoutCountUp by mt (@mtakeda) on CodePen.

クリックされたらクリック数が増えていきます。