iCheck Plug in & Knockout Js答案

【问题标题】：iCheck Plug in & Knockout JsiCheck Plug in & Knockout Js
【发布时间】：2017-01-15 16:39:33
【问题描述】：

我需要一些帮助来使用敲除和 icheck 插件检查页面加载上的复选框。

我创建了一个自定义绑定来监听“ifChecked”检查方法，但它不起作用。

<input type="checkbox" id="access-user-information" name="edit_existing_user" data-bind = "iCheck: { checked: selectedUser() && selectedUser().edit_existing_user==1}">

淘汰码：

ko.bindingHandlers.iCheck = {     
                init: function (element, valueAccessor) {

                    $(element).iCheck({
                        checkboxClass: 'icheckbox_square-red'
                    });

                    $(element).on('ifChecked', function (event) {
                        var observable = valueAccessor();
                        observable.checked(true); 
                    });
                },
                update: function (element, valueAccessor) {
                    var observable = valueAccessor();
                }
            };

【问题讨论】：

注意checked属性的值。当然不是可观察的，而是布尔值：真/假。因此，observable.checked(true); 永远不会起作用
正确答案应该是什么？

标签： javascript knockout.js icheck

【解决方案1】：

一些变化：

监听复选框的变化（'ifToggled' 事件）
复选框的可观察值应该是布尔值，因此根据复选框状态（真/假）设置值。为此，我使用了 jQuery .is(':checked')。
在“更新”函数中设置初始状态。

绑定代码：

ko.bindingHandlers.iCheck = {
  init: function(element, valueAccessor) {

    $(element).iCheck({
      checkboxClass: 'icheckbox_flat-red'
    });

    $(element).on('ifToggled', function(event) {
      var observable = valueAccessor();
      observable($(element).is(':checked'));
    });
  },
  update: function(element, valueAccessor) {
    var observable = valueAccessor();
    observable($(element).is(':checked'));
  }
};

这里有一点jsbin 来测试一下。

希望对您有所帮助。

【讨论】：

【解决方案2】：

如果您的复选框是enabled，并且您可以通过点击它为其赋予新值，则它必须是带有read 和write 方法的ko.computed。

当您选择当前用户时，您希望它自动被选中。这是read 部分：

this.isEditingCurrentUser = ko.computed(function() {
  return this.selectedUser() && 
         this.selectedUser().edit_existing_user === 1;
}, this);

您应该认识这个表达式：它是您用作数据绑定的表达式。在视图模型中使用 ko.computed 与在数据绑定中使用表达式非常相似。

现在，当您想用true 或false 覆盖此值时会出现问题：knockout 无法为您决定如何反转逻辑。这个，你必须指定。它看起来像这样：

this.isEditingCurrentUser = ko.computed({
  read: function() { /* the expression above */ },
  write: function(newValue) { /* How to handle a user input override */ }
});

我在下面的示例中展示了它是如何工作的。我省略了自定义绑定，因为需要先解决真正的逻辑问题：

var VM = function() {
  var currentUserId = 1;
  
  this.users = [
    { id: 1, name: "User 1" },
    { id: 2, name: "User 2" },
    { id: 3, name: "User 3" },
  ];
    
  this.selectedUser = ko.observable(2);
  this.editCurrent = ko.computed({
    read: function() {
      return this.selectedUser() &&
             this.selectedUser().id === currentUserId;
    }.bind(this),
    write: function(val) {
      var newUser = val
        ? this.users.find(function(user) {
            return user.id === currentUserId;
          })
        : null;
    
      this.selectedUser(newUser);
    }.bind(this)
  }, this);
};
    
ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: users, value: selectedUser, optionsCaption: 'Select a user', optionsText: 'name'"></select>

<div>
  <input type="checkbox" data-bind="checked: editCurrent">
  Edit current user
</div>

【讨论】：