KnockoutJSの基本とアプリケーションサンプル

基本

ざっくりサーベイをした結果.
デモ以上，社内利用以下，プロダクション未満なら
knockoutjsで確実に十分だということがわかった.
ただ，MSはプロダクションにも使用していると思うのでプロダクションでもいいかも

多分tutorialを順にやっていくのが一番いいと思われる

introdution
working with lists and collections
single page applications (すごいわかりづらい...)
creating custom bidinigs
loading and saving data

構文

イメージは

viewmodelはクラスで
properties, methodsを持っている
var self = thisをわすれない

data-bind中の名前とko.applybindings(viewmodel)した
viewmodelにおけるself.${property}がバインドされる.

基本的data-bind構文

<${element} data-bind="${binding}: ${property or function}"> </${element}>

Binding

ここに一覧が書いてある

1つのエレメントに複数bindingも可能 ", " で区切る

Click Binding

onload時にcallされる

これが解決策, anonymous functionでwrapするか${function}.bind()で呼ぶ

parameterをパスする

documentにちゃんと書いてある

foreach, withはbinding contextを作るので，foreachなら

<tbody data-bind="foreach: movies">
 <tr data-bind=
     "click: function() {$root.getMovies($data.user_name)}"></tr>
 ...

な感じで対応可能．$rootはko.applyBindings(viewModel)したviewModelを指す

Biding Context

引用

A binding context is an object that holds data that you can reference from your bindings.

Each time you use a control flow binding such as "with" or "foreach", that creates a child binding context that refers to the nested view model data.

Bindings contexts offer the following special properties that you can reference in any binding

${property}がbinding contextにおけるreferenceになる
こんな感じで使うと思われる

<data-bind="with: viewModel">
<span data-dind="text: propety"></span>

これを参考．

Custom Bindings

既存のbdiningsをwrapするだけでも利用価値があるらしい
(未調査)

Component

viewmodelをcomponentizeする(よくわかっってない)

Utility Function

utility functionなるものがあるらしいがdocumentからリンクがなくないか?
一覧らしき表

ko.observableArray

arrayをpushするときに陥るパフォーマンス問題の解決策

for-loopしてpushしない!

これの３つ目をやった

Webアプリ

knockoutjsを使った超シンプルなリコメンドデモアプリを作った．

コードはここ

こんな感じの構成

data: movie lens (10m), ratings.datの3 cols (user, movie, rating)のみを使用する
recommedation algo: Item2Item CF
backend: Flask, PyMongo
frontend: bootstrap3, knockoutjs3

動かし方は，README.mdに書いた．

全体所感

Documentだけだとイミフな部分が多かった
実際にアプリを作ってるとかなり理解が進んだ．click binding, pushAllとか．
Single Page Appにはかなり向いていることがわかった
基本はViewModel１つで十分な感じ
TabつきのSPAならViewModel:Tab = 1:1とかの設計にするといいかも (やり方は未調査)
ViewModelはクラスぽく書けるので結構いい感じ

JSをまともに書いたことがないBackendしかできないというエンジニアでも．
3日でここまで頑張れました．むしろ時間がかかったのはbackend実装なので学習コスパは結構いいほうかも．その点は，AngularJsよりはいいと思った．

KZKY memo

自分用メモ．