2

Mithril.jsのm.prop()で何らかの処理したgetter-setterを返したいです

/`John`という値でgetter-setterを初期化
var name = m.prop("John");

//値を取得する
var a = name(); //a == "John"

//双方向データバインディングのサンプル
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()})
        ]);
    }
};

上記でJohnという値を入力したら、おはよう Johnこんばんは John と表示させるにはどうすれば良いでしょうか?
・例えばですがmodel部分を下記のようにしてみたいのですが

this.nameOhyou = m.prop(name);
this.nameKonbanha = m.prop(name);

また、そもそも論として、何らかの処理したgetter-setterを返すという考え自体がおかしいのでしょうか?
・何らかの処理をしてしまったら、それはもうgetter-setterではない?
・m.prop()では出来ないのでしょうか?

リンク

2 件の回答 2

2

以下の様な形で、controllerを使用すれば、configを使わずとも良いと思いますがどうでしょうか?

var User = {
    model: function(name) {
        this.name = m.prop(name);
    },
    controller: function() {
        this.user = new User.model("John Doe");
        this.ohayou = function() {
            return "おはよう " + this.user.name();
        };
        this.konbanha = function() {
            return "こんばんは " + this.user.name();
        };
    },
    view: function(controller) {
        return m("div", [
            m("input", {onkeyup: m.withAttr("value", controller.user.name)}),
            m("p", controller.ohayou()),
            m("p", controller.konbanha())
        ]);
    }
};
window.onload = function() {
    m.mount(document.body, User);
}
1
  • 試してみましたが期待通り動作しました。configを使わずともイケるんですね
    – re9
    Commented 2016年8月8日 0:31
2

まず、公式のチュートリアルがトリッキーなので分かりづらいことがあると思います。

ご希望の動作にしたいコードを書いてみました。
Mithrilは自由度が高く、制約も少ないのでかえって迷うことが多いと思います。
日本語の電子書籍があるのでそちらで勉強してみるといいかもしれません。

オライリー・ジャパン
Mithril――最速クライアントサイドMVC
http://www.oreilly.co.jp/books/9784873117447/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<script type="text/javascript">
    var Model = function (name) {
        this.name = m.prop(name);
    };

    var User = {
        controller : function () {
            this.user = new Model('');
        },
        view       : function (controller) {
            return m("div", [
                m("input", {oninput : m.withAttr("value", controller.user.name)}),
                m('p', { config : function (element, isInitialized, context) {
                    if (isInitialized) {
                        element.textContent = 'おはよう' + controller.user.name() + '、こんばんは' + controller.user.name();
                    }
                }})
            ]);
        }
    };

    m.mount(document.body, User);
</script>
</body>
</html>

2
  • 期待通り動作しました! モデルで処理するのかと思っていたのですが、isInitializedを使うのですね。参考になりました
    – re9
    Commented 2016年7月6日 3:29
  • モデルのm.propとビューのm.withAttrがデータバインディングの肝となっています。 Commented 2016年7月6日 5:40

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。