KnockoutJs ViewModel 功能答案

【问题标题】：KnockoutJs ViewModel functionKnockoutJs ViewModel 功能
【发布时间】：2016-11-17 12:21:33
【问题描述】：

我是 KnockOutJs 的新手，我遇到了这个问题。这是我的简单表单，只有在单击按钮时才会执行登录功能。但是，该函数在页面加载时执行，而用户没有单击它。我该如何解决？

$().ready(function() {
      function ViewModel() {        
        var self = this;
        self.username = ko.observable();
        self.password = ko.observable();
        self.Login = function() {          
          console.log('do login');
        };
      }
      ko.applyBindings(new ViewModel());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="form-group">
  <input type="text" id="username" name="username" data-bind="value:username" placeholder="User Name" />
</div>
<div class="form-group">
  <input type="password" id="password" name="password" data-bind="value:password" placeholder="Password" />
</div>
<button type="button" id="btnlogin" data-bind="click:Login()">login</button>

【问题讨论】：

您必须在click 绑定中删除()：您引用该方法，而不是执行它。即：data-bind="click: Login"
您在创建 DOM 元素后立即执行 Login...因此无需单击按钮即可发出警报事件...

标签： knockout.js viewmodel

【解决方案1】：

将按钮行替换为以下内容：

<button type="button" id="btnlogin" data-bind="click:Login">login</button>

您当前正在执行创建 DOM 的 Login 方法，删除括号将等待触发点击事件。

【讨论】：