m.prop
この関数は、getter-setterのファクトリ関数です。この関数は、情報を保持する関数を返します。
m.propgetter-setterの値を変更しても、再描画が起動されることはありません。Mithrilの再描画システムは、m.startComputationとm.endComputationの呼び出しをトリガーとして実行されます。これらの関数は、m.mountやm.routeを通じてコンポーネントを初期化したり、m()を使って作られたテンプレート内のイベントハンドラを起動したときに呼ばれます。
使用方法
/`John`という値でgetter-setterを初期化
var name = m.prop("John");
//値を取得する
var a = name(); //a == "John"
//値を`Mary`に設定する
name("Mary"); //Mary
//値を取得する
var b = name(); //b == "Mary"
この関数をm.withAttrと一緒に使うことで、ビューとモデル間のデータバインディングを作成し、モデルエンティティのプロパティのデータアクセス方法を平準化できます。
//双方向データバインディングのサンプル
var User = {
model: function(name) {
this.name = m.prop(name);
},
controller: function() {
this.user = new User.model("John Doe");
},
view: function(controller) {
m.render("body", [
m("input", {onchange: m.withAttr("value", controller.user.name), value: controller.user.name()})
]);
}
};
上記のサンプルでは、m.propを使うことで、コントローラとビュー内のコードを変更することなく、ユーザ名のgetter/setterの実装を変更できるようになっています。
m.propは、m.requestやm.deferredと組み合わせて、非同期操作の結果に対してデータを束縛することもできます。
var users = m.prop([]);
var error = m.prop("");
m.request({method: "GET", url: "/users"})
.then(users, error); //成功時には`users`が変更され、それ以外では`error`が変更される
//レスポンスには`[{name: "John"}, {name: "Mary"}]`というデータが格納されると想定
//そのため、ビューなどの中で解決されると、`users` getter-setterはユーザの配列を持ちます
//例: users()[0].name() == "John"
サードパーティのPromiseライブラリのサポート
promiseがm.prop()Mithrilのpromiseが返されます。Mithrilのpromiseもまたgetter-setter関数で、promiseが果たされると、解決された値が格納されます。
promiseが解決されるまでは、propの値はundefinedになります。
Qというpromiseライブラリを使うサンプルがこちらです:
var deferred = Q.defer()
var users = m.prop(deferred.promise)
users() // undefined
deferred.resolve("Hello")
//QのA+互換のPromiseが次のtickで解決するのを待つ
setTimeout(function() {
users() // Hello
users.then(function(value) {
console.log(value) //Hello
})
}, 1000)
getter-setterのシリアライズ
getter-setterはJSONにシリアライズすることができます:
var data = {foo: m.prop("bar")};
JSON.stringify(data); // '{"foo": "bar"}'
これにより、getter-setterはそのままm.requestなどのパラメータとして渡すことができます。
シグニチャ
GetterSetter prop([any initialValue])
where:
GetterSetter :: any getterSetter([any value])
any initialValue (optional)
初期値。もし初期値が与えられなければ、getter-setterの内部ストアのデフォルト値は
undefinedになります。returns any getterSetter([any value])
getter-setterメソッド。
any value (optional)
もし引数が渡された場合には、getter-setterの内部ストアの値を、渡された値に更新します。
もし渡されなければ、現在の内部ストアの値を返します。
returns any value
このメソッドは、値が更新されたかどうかにかかわらず、常に内部ストアの値を返します。