Question

我需要一些帮助来检查页面加载时的复选框使用knockout＆amp; 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();
                }
            };

Answer 1

一些变化：

在复选框中收听更改（'ifToggled'事件）
复选框的observable应该是布尔值，因此请根据复选框状态（true / false）设置值。我使用了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来测试它。

希望有所帮助。

Answer 2

如果您的复选框为enabled，并且您可以通过点按它来为其指定新值，则必须是ko.computed并使用read和write方法。

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

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

你应该认识到这个表达式：它就是你用作数据绑定的东西。在viewmodel中使用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>

iCheck Plug in＆amp;淘汰赛Js

2 个答案: