[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で公開しています。

https://github.com/keisuken/coffeepot

使い方は?

GitHubに仕様やサンプルコードが書かれていますので、参照して下さい。