2016-08-22 2 views
0

Я - новый разработчик разработки Frond-end, «Mithril JS». Я создал образец страницы входа с помощью шаблона 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") 
        ]) 
       ]) 
      ]), 
      "\ 
" 
     ])] 
} 

ответ

0

Simp ly, ваша функция app.view в вашей форме входа в систему содержит ссылку на vm.name, но ни один из кода, который вы там разместили, не определяет, что такое vm.name. Вторая строка функции - 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 и vm.password выглядеть m.props и vm.submit - это, очевидно, функция (понятно, что вы ожидаете от нее - войдите в систему, но я не знаю, как вы это ожидаете). Таким образом, способ правильно выполнить 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); 
Смежные вопросы