CheckBox未在Knockoutjs中检查

sup*_*ool 5 checkbox knockout.js

我正在使用带有函数的复选框data-bind,但我无法check复选框.

视图:

<input type="checkbox" data-bind="click: function(){ f('hello parameter'); }">Click me
Run Code Online (Sandbox Code Playgroud)

查看型号:

var VM = function () {
    this.f = function (param) {
        alert(param); // here i am getting 'hello parameter'
        return true;
    }
}

ko.applyBindings(new VM());
Run Code Online (Sandbox Code Playgroud)

这是我的小提琴

Nik*_*iko 13

默认情况下,click绑定会根据您的JavaScript单击事件处理程序将处理所有内容的假设来阻止对单击的默认反应.您需要返回"true"以获取默认行为,您正在从f()函数中执行此操作,而不是内部的包装器data-bind:

<input type="checkbox" data-bind="click: function() { f('hello parameter'); }">
Run Code Online (Sandbox Code Playgroud)

应该

<input type="checkbox" data-bind="click: function() { return f('hello parameter'); }">
Run Code Online (Sandbox Code Playgroud)


Tan*_*ner 5

没有代码的上下文,你不清楚你打算如何使用这个控件.使用复选框,您通常会使用绑定到布尔值observable 的已检查绑定:

选中的绑定将可检查的表单控件(即复选框()或单选按钮())与视图模型上的属性相链接.

因此,使用选中的绑定编写此代码的另一种方法是:

示例代码:

var VM = function () {
  var self = this;
  self.myCheck = ko.observable(false);

  self.myCheck.subscribe(function () {
    alert('checked value = ' + self.myCheck());
  });
}

ko.applyBindings(new VM());
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
  <input type="checkbox" data-bind="checked: myCheck" />
  Click me
</div>
Run Code Online (Sandbox Code Playgroud)

在这个例子中,有一个跟踪复选框值的observable : self.myCheck. 因此,当选中/取消选中复选框时,self.myCheck()将设置为true/false.

为了在值改变时提供一些输出或运行一些代码,我已经订阅了observable,这基本上意味着每次更改observable的值时,都会触发警报(或者你放入的任何代码)那里).

演示JS小提琴