#navi_header|JavaScript|

JavaScriptでのData Bindingってどうしてるのか、軽くググってみたところObserverパターンの応用であり、JSでのライブラリの代表例としてVue.jsというのがありましたので、2015-03時点で参考URLをメモ。

- [[1390]] でもWPFの世界の参考記事をいくつかググって並べたが、One Way / Two Way / Once の3種類位あるらしい。
- One-Way は単方向。Two-Wayが双方向。Onceは最初の一度きり、という具合に使い分けされてるらしい。
- 実装としては、Observerパターンを使って、オブジェクトの変更イベントを購読(subscribe)して、データの変更やViewの変更イベントをお互いに伝え合う形。
- JSで開発する場合は、Two-Wayの利用頻度が高めなのかも。

** JavaScriptとObserverパターン

JavaScriptでObserverパターンはどう作るか？いくつか、実際にサンプルコードで例示してくれてる記事が見つかった。

- 【JS】オブザーバパターンの実装 | kotazi.com
-- http://kotazi.com/archives/1039
- JavaScriptデザインパターン – 第3部：プロキシ、オブザーバー、コマンド | Adobe Developer Connection
-- http://www.adobe.com/jp/devnet/html5/articles/javascript-design-patterns-pt3-proxy-observer-command.html
- Observer JavaScript Design Pattern with examples- dofactory.com
-- http://www.dofactory.com/javascript/observer-design-pattern

** JavaScriptでのData Bindingのサンプル

参考：
- Two-Way Data Binding
-- http://n12v.com/2-way-data-binding/
-- PureJSやBackbone, React, Angular, Meteor のそれぞれでData Bindingのサンプルを書いて解説してくれてる
- Easy Two-Way Data Binding in JavaScript - Luca Ongaro
-- http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/
-- 自力でTwo-Way Data Bindingを実装、jQueryで楽してる記事
- Data-binding Revolutions with Object.observe() - HTML5 Rocks
-- http://www.html5rocks.com/en/tutorials/es7/observe/
-- Chrome36から使えるようになった Object.observe()を使ったData Bindingのサンプル

その他、Stack Overflowより：
- javascript - What is two way binding? - Stack Overflow
-- http://stackoverflow.com/questions/13504906/what-is-two-way-binding
- html - How to Implement DOM Data Binding in JavaScript - Stack Overflow
-- http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript

** Vue.jsの参考URL

2015-03現在、Observerを基盤としたDataBindingと、さらに一部ではReactなどのパラダイムを取り入れたライブラリ・フレームワークが百花繚乱なのがJavaScript界隈のホットな現状。
その中で、Vue.jsを使ったMVVMとData Bindingのサンプルがいくつか見つかったので、メモ。

- クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
-- http://www.slideshare.net/sekiyousuke/mvvm-vuejs
- はじめよう　Vue.js - Qiita
-- http://qiita.com/kitfactory/items/9c9b9312ace03e731b33
- Getting Started - vue.js
-- http://vuejs.org/guide/

#navi_footer|JavaScript|