Emotion Wave Tech Blog

福岡にあるエモーションウェーブ株式会社のエンジニアが書いています。

JavaScriptフレームワークでデータバインディングを試してみる(Knockout.js編)

f:id:devew:20190322102054j:plain

photo credit: Severin Sadjina via photopin cc

こんにちは。 去年から引き続き今年も花見が出来なかったのでがっかりしている中原です。

花見の話は置いといて、今回もJavaScriptでのデータバインディングについてです。 使用するのはKnockout.js。公式サイトは以下です。

Knockout : Home

以前のRactive.jsで作成したサンプルと同じものをKnockout.jsで実装してみました。 Ractive.jsの記事は以下です。

JavaScriptフレームワークでデータバインディングを試してみる(Ractive.js編) | tech.ewdev.info

結果的にはこういう画面を作りました。 (下の画面は実際に動作します)

「add tweet」ボタンを押すと入力した内容が下に一覧で表示されます。 また、Filterのテキストボックスで一覧のフィルタリングもできるようになっています。

HTMLはこんな感じで、KnockoutのModelとバインドする場合は「data-bind」属性を記述します。

JavaScript側はこんな感じ。 バインドするプロパティとメソッドを記述したModelを作成し、最後にko.applyBindings! これでHTMLとバインドされます。

言うまでもなくView(Html)とModel(JavaScript)がバインドしているので、双方向で値が連動されます。 個人的にですがデータバインディングは軽快な気持ちで実装が出来る気がしてます。

てことで、これからWebアプリを作成する際にはKnockout.jsも検討してみてはどうでしょうか。 ちなみに日本語ドキュメントもあるので、Ractive.jsよりは取っ付き易いと思います。

ドキュメントKnockout.js