Knockout入門

Knockout入門

knockout.jsって?

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

knockout.jsを使ってみる

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

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

simpleBindingViewModel.js

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

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

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

SimpleBinding.html

<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 maiki takeda (@mtakeda) on CodePen.

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

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

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

countUpViewModel.js

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

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

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

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

CountUp.html

<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 maiki takeda (@mtakeda) on CodePen.

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