Uncaught TypeError：vm.nameは関数ではありません

私は「Mithril JS」を学ぶ新しいFrond-end開発者です。私はMVCパターンを使ってサンプルログインページを作成しました。コンソールエラー後にログインフォームが機能しない：Uncaught TypeError：vm.nameは関数ではありません

Uncaught TypeError: vm.name is not a function

この問題を解決するにはどうすればよいですか？

index.htmlを

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Mithril Js</title> 
     <link rel="stylesheet" href="css/style.css"> 
     <link rel="stylesheet" href="bower_components/todomvc-common/base.css"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="bower_components/mithril/mithril.min.js"></script> 
     <script src="bower_components/todomvc-common/base.js"></script> 
    </head> 
    <body> 
     <section id="MitApp"></section> 
     <script src="js/app.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="js/views/login.js"></script> 
     <script src="js/controllers/todos.js"></script> 
    </body> 
</html>

App.Js（ルートマップを作成する）

var app = app || {}; 

(function(window){ 
    'use strict'; 

    app.ENTER_KEY = 13; 
    app.ESC_KEY = 27; 

    m.route.mode = "hash"; 

    m.route(document.getElementById('MitApp'), '/', { 
     "/":app, 
     "/:filter":app 
    }); 
})(window);

ログインフォーム

var app = app || {}; 



app.view = function(ctrl){ 
    var vm = app; 
    console.log(vm); 
    return[m(".container", {style: {"margin-top": "55px"}}, [ 
      m(".col-md-4.col-md-offset-4", [ 
       m("h4", "Login"), 
       m("form[action=''][enctype='multipart/form-data'][method='post']", [ 
        m(".form-group", [ 
         m("input.form-control[placeholder='Username'][type='name']", {value:vm.name(), onchange:m.writeAttr("value", vm.name)}) 
        ]), 
        m(".form-group", [ 
         m("input.form-control[placeholder='Password'][type='password']", {value:vm.password(), onchange:m.writeAttr("value",vm.password)}) 
        ]), 
        m(".form-group", [ 
         m("button.btn.btn-primary.pull-right[id='login'][type='submit']",{onclick:vm.submit.bind(vm)}, "Login") 
        ]) 
       ]) 
      ]), 
      "\ 
" 
     ])] 
}

出典

2016-08-22 Venkatesh Venkatesh

簡体字あなたのログインフォームのapp.view関数にはvm.nameへの参照が含まれていますが、ここに投稿したコードのどれもvm.nameではありません。関数の2行目はconsole.log(vm)です。ブラウザコンソールを開いて、vmが何であるかを確認する必要があります。私はvmがappへの参照で、あなたのコードの残りの部分を読んで、私は付属の以下の参考文献を見ることができることがわかります。

app.ENTER_KEY = 13; 
app.ESC_KEY = 27; 
app.view = function(){/**/}

は、私の知る限り見ることができるように、それらはappに設定されたプロパティだけです/ vmが、私はapp.view機能の内容を読んだとき、私はそれは、次の余分な性質が利用できることを期待していることがわかります。

vm.name 
vm.password 
vm.submit

vm.nameとm.props、およびなどのvm.password外観は明らかに機能です（ユーザーにログインすることを期待していることは明らかですが、どうやってそれを行うのか分かりません）。したがって、viewを正しく実行させる方法は、これらのプロパティを定義することです。私はあなたがapp.ENTER_KEYとapp.ESC_KEYを定義した同じ場所でこれらを定義します - App.jsに - それはあなたがあなたのモデルを維持したい場所のようですので：

var app = app || {}; 

(function(window){ 
    'use strict'; 

    app.ENTER_KEY = 13; 
    app.ESC_KEY = 27; 

    // Define the extra properties needed for your view: 
    app.name = m.prop('') 
    app.password = m.prop('') 

    app.submit = function(){ 
     // ... 
    } 

    m.route.mode = "hash"; 

    m.route(document.getElementById('MitApp'), '/', { 
     "/":app, 
     "/:filter":app 
    }); 
})(window);

を

出典

2016-08-22 07:53:41 Barney

Uncaught TypeError：vm.nameは関数ではありません

答えて

関連する問題