0

質問1.Mithril.jsで、inputタグが複数ある際、どちらから入力されたか条件分岐するためには、どうすればよいでしょうか?
・クラス付与が必要?

   <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("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();
                        }
                        //if(最初のinputタグに入力されたら) {}
                        //if(2番目のinputタグに入力されたら) {}
                    }})
                ]);
            }
        };

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

質問2.上記のような感じでinputタグが複数ある際、入力された内容の処理結果を、別のinputタグへ出力することは可能でしょうか?
・最初のinputタグへ入力 → 処理結果を2番目のinputタグへ出力
・2番目のinputタグへ入力 → 処理結果を最初のinputタグへ出力

1 件の回答 1

1

両方の質問ともレアケースで、単なるDOM操作なのでMithrilでやらずにjQueryなどで別途コードを書く方が簡単だと思いますがとりあえず…

質問1

<!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('');
            this.inputElement = m.prop('');
            this.whereInput = function (e) {
                this.inputElement(e.target.id);
                this.user.name(e.target.value);
            }
        },
        view       : function (controller) {
            return m("div", [
                'ID: one ',
                m("input#one", { oninput : function (e) { controller.whereInput(e) }}),
                m('br'),
                'ID: two ',
                m("input#two", { oninput : function (e) { controller.whereInput(e) }}),
                m('p', { config : function (element, isInitialized, context) {
                        if (isInitialized) {
                            element.textContent = 'ID: ' + controller.inputElement() + 'からの入力= ' + controller.user.name();
                        }
                    }
                })
            ]);
        }
    };

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

質問2

<!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), value : controller.user.name()}),
                m('br'),
                m("input", {oninput : m.withAttr("value", controller.user.name), value : controller.user.name()})
            ]);
        }
    };

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

質問1をjQueryで

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input id="one" type="text" value=""/><br>
    <input id="two" type="text" value=""/>
    <p id="output"></p>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
    (function ($) {
        $(function () {
            $('#one, #two').on('input', function (e) {
                $('#output').text('ID: ' + e.target.id + 'からの入力= ' + e.target.value);
            })
        });
    })(jQuery)
</script>
</body>
</html>

3
  • 期待通り動作しました! これって単なるDOM操作なんですね。イベント絡みなので、Mithrilを試してみようと思ったのですが。質問1のケースではm.withAttrは使えないんですね…
    – re9
    Commented 2016年7月11日 3:27
  • 1
    m.withAttrはビューとモデル(またはビューモデル)間でデータをバインディングするためのものです。ビュー内でエレメントを操作するには自前でコードを書かなくてはなりません。jQueryでやった場合も追加しました。 Commented 2016年7月11日 3:46
  • なるほど。「データをバインディング」と「ビュー内でエレメント操作」は全く意味が異なるわけですね。>自前でコードを書かなくてはなりません。最初の回答を読んで思ったのですが、逆に自前で普通のコードも書けるんだと思いました。質問した時点では、m.withAttrを使うものだとばかり思いこんでいたので、Mithril(引数等の)制約により、通常のようにイベントオブジェクトを渡せるとか思いもしませんでした。jQueryコード追記も参考になりました
    – re9
    Commented 2016年7月12日 3:13

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

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