28049


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

[code]

    /`John`という値でgetter-setterを初期化
    var name = m.prop("John");
    
    //値を取得する
    var a = name(); //a == "John"
    
[/code]

* * *
[code]

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

* * *

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

[code]

    this.nameOhyou = m.prop(name);
    this.nameKonbanha = m.prop(name);
    
[/code]

* * *

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

[リンク](http://mithril-ja.js.org/mithril.prop.html)


CC BY-SA 3.0
2016-07-02T04:01:22.640
27264
2016-08-03T11:11:20.260
7886
question
javascript
Mithril.jsのm.prop()で何らかの処理したgetter-setterを返すには？


まず、公式の[チュートリアル](http://mithril.js.org/getting-
started.html)がトリッキーなので分かりづらいことがあると思います。

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

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

[code]

    <!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>
[/code]


CC BY-SA 3.0
2016-07-06T03:09:09.813
27368
2016-07-06T03:27:02.547
2016-07-06T03:27:02.547
13838
13838
27264
answer


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

[code]

    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);
    }
    
[/code]


CC BY-SA 3.0
2016-08-03T11:11:20.260
28049
2016-08-03T11:11:20.260
17377
27264
answer