iCheckプラグで＆ノックアウトのJs

Question

私はノックアウト& 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）に従って値を設定します。私は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); 

あなたはこの式を認識すべきである：それはあなたがあなたのデータバインドとして使用するものです。あなたのビューモデルにko.computedを持つことは、データバインドで式を使うこととよく似ています。あなたがtrueまたはfalseで、この値を上書きしたいとき

は今、問題があります：ノックアウトはロジックを逆にする方法を、あなたのために決定することはできません。これを指定する必要があります。

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

これは次の例でどのように動作するかを示しています。実際のロジックの問題を最初に解決する必要があるため、私は、カスタムバインディングを残してきた：checkedプロパティの値が何であるかを

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>