[JavaScript][MVVM] Coffee Pot: MVVMフレームワーク for JavaScript
Coffee Pot(MVVMフレームワーク for JavaScript)をリリースしました。
まだ実験的な実装ではありますが、当初の実装したかったものは実現しました。
Coffee Potとは
Coffee PotとはJavaScript用のMVVM(View/ViewModel/Model)フレームワークです。
主な機能は、
- ViewはただのHTML(DOM)
- DOMの値(value,属性など)をViewModelの変数にバインドできる
- バインドされた変数にアクション(変更時に呼び出される関数)を設定できる
- Reducer(整形)をバインドできる(trim(前後のスペース削除),max(文字数制限))
- Fomatterをバインドできる(comma3,comma4(3または4桁のカンマ区切り)
- イベントをバインドできる
- イベントもViewModelで管理され、ボタンを押したなどのイベントに対する処理を行います
- ViewModel, Modelにメソッドを定義できる
- ViewModelやModelへアクセスできる
- ViewModelのメソッドはバインドされた値にアクセスできる
です。
サンプルコード
いわゆるHello, world!ものです。
<!DOCTYPE html> <html> ... <body> <div><input id="name" type="text"></div> <div id="message"></div> </body> </html>
var ViewModel = { bindings: { name: ['val:text:trim', function(value) {this.printMessage();}], message: 'text' }, printMessage: function() { var values = this.values; values.message = this.Model.greeting(values.name); } }; var Model = { greeting: function(name) { return name != '' ? 'Hello, ' + name + '!' : ''; } };
使い方は?
GitHubに仕様やサンプルコードが書かれていますので、参照して下さい。
こちらでも日記を書くことにしました
トップがメインの日記なんですけど、こちらの方がさらされる可能性が高そうですので実験的にこちらでも書いてみます。
■
ああ，そうだ，keisukenな人は，Hatenaにもいるんですけど，その人とは別人で，Javaなダメなkeisukenの人は，
主体である航海日誌と，keisukenの日記(/.J)と，keisuken(Tumblr)の副があって，
あと，
@keisuke_n(Twitter)
とかでも出没しています．
