title: Uncaught TypeError: vm.name is not a function
body: <p>I am a new Frond-end developer learning "Mithril JS". I created sample login page using MVC Pattern. The login form is not working after console error:</p>
  
  <pre><code>Uncaught TypeError: vm.name is not a function
  </code></pre>
  
  <p>How to resolve this issue?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Mithril Js&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/style.css"&gt;
          &lt;link rel="stylesheet" href="bower_components/todomvc-common/base.css"&gt;
          &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;script src="bower_components/mithril/mithril.min.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/todomvc-common/base.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;section id="MitApp"&gt;&lt;/section&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/views/login.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers/todos.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>App.Js</strong> (create route map)</p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>Login Form</strong></p>
  
  <pre><code>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")
                      ])
                  ])
              ]),
              "\
  "
          ])]
  }
  </code></pre>