27515


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

[code]

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

* * *

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


CC BY-SA 3.0
2016-07-10T03:48:41.377
27494
2016-07-11T03:42:49.490
7886
question
javascript
Mithril.jsで、m.withAttrが複数ある際、どちらが入力されたか判別するためには？


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

**質問1**

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

**質問2**

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

**質問1をjQueryで**

[code]

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


CC BY-SA 3.0
2016-07-11T01:27:54.210
27515
2016-07-11T03:42:49.490
2016-07-11T03:42:49.490
13838
13838
27494
answer