iCheck插件和淘汰型Js

Question

我需要一些帮助来检查页面加载使用knockout & 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‘事件)
• 复选框的可观察值应为布尔值，因此请根据复选框状态(true/false)设置值。

绑定的代码：

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

如果您的checkbox是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>

​