ノックアウトjsボタンクリックしてすべてのチェックボックスを選択

Question

私はバインドにKnockout jsを使用しています。チェックボックスを使用してデータのバインドリストです。データを取り出し、すべてのアイテムにチェックボックスを含むリストアイテムにバインドしています。あなたが追加する必要があり、ボタン名は「-すべてを選択」と私は、すべてのチェックボックスを選択する必要があると私は、この必要性のヘルプを達成するための方法を選択し、チェックボックスからすべてのデータを取得する必要があり、そのボタンをクリックすると...

<div> 
<input type="button" value="Select-All" data-bind="click:SelectAll" /> 
</div> 
<div id="List" data-bind="foreach:items"> 
<ul> 
<li> 
<span data-bind="text:userId" style="display:none"></span> 
<span style="margin-top: 10px;font-size: 22px;font-weight: bold;padding-left:0px;" data-bind="text:username"></span> 
<input type="checkbox" data-bind="value:userId(),click:$root.toggle" />     
</li> 
</ul> 
</div> 

//ViewModel 
function userViewModel() 
var self=this; 
    { 
    function userList(userId, userName) 
    { 
     var self=this; 
    self.userID=ko.observable(userId); 
    self.userName=ko.observable(userName); 
    self.Selected = ko.observable(false); 
    } 
    self.toggleAssociation = function (item) { 
    //here i am getting the individual selected checkbox Item 
    } 

//This part is not working 
    self.SelectAll = function() { 
    console.log("in") 
self.items().forEach(function(item) { 
    item.Selected(true); 
}); 
    }; 

    self.items = ko.observableArray(); 
    self.add = function (userId, userName,){ 
    self.items.push(new FriendsContact(userId, userName) 
    } 
}; 

//Page Load 
$(function() { 
var viewModel = new userViewModel(); 
ko.applyBindings(viewModel); 

//Get the data from database// 
$.ajax({ 
    type: "GET", 
    dataType: "json", 
    contentType: 'application/json; charset=utf-8',  
    url: baseUrl + 'xxx/xxx/xxxxx', 
    success: function (data) { 
      $.each(data, function (key, value) { 
       viewModel.add(value.userId, value.userName) 
      }); 
    } 
}) 
}); 

Answer 1

に置き換えることができます。下の減速度は間違っています

function userViewModel() 
    var self=this; 
    { 

に基づいて私はあなたのコードから見て、このようなことにアプローチする方法を示します。

例：https://jsfiddle.net/kyr6w2x3/103/

HTML：

<div> 
     <input type="button" value="Select-All" data-bind="click:SelectAll,visible:ShowSelectAllBtn" /> 
     <input type="button" value="UnSelect-All" data-bind="click:UnSelectAll,visible:ShowSelectAllBtn() == 0" /> 
    </div> 
    <div> 
     <input type="button" value="Add" data-bind="click:add" /> 
    </div> 
    <div id="List" data-bind="foreach:items"> 
     <ul> 
     <li> 
      <span data-bind="text:userId"></span> 
      <span style="margin-top: 10px;font-size: 22px;font-weight: bold;padding-left:0px;" data-bind="text:userName"></span> 
      <input type="checkbox" data-bind="checked:Selected" />     
     </li> 
     </ul> 
    </div> 

JS：

var data = [{userId:1 , userName : "UserName1"},{userId:2 , userName : "UserName2"}]; 

function userViewModel(){ 
    var self = this; 
    self.items = ko.observableArray(); 
    self.ShowSelectAllBtn = ko.observable(true); 
    self.loadData = function(){ 
    // here you have your ajax 
    //maping fake data assuming it is inside the ajax's success 
    self.items($.map(data, function (item) { 
     return new userItemViewModel(item); 
    })); 
    } 
    self.SelectAll = function() { 
    self.ShowSelectAllBtn(false); 
    ko.utils.arrayForEach(self.items(), function (item) { 
     item.Selected(true); 
    }); 
    }; 
    self.UnSelectAll = function() { 
    self.ShowSelectAllBtn(true); 
    ko.utils.arrayForEach(self.items(), function (item) { 
     item.Selected(false); 
    }); 
    }; 
    var i = 2; 
    self.add = function (userId, userName){ 
    // creating a fake json object with a userId and a userName 
    userId = i++; 
    userName = "userName" + i; 
    obj = {userId:userId , userName : userName} ; 
    self.items.push(new userItemViewModel(obj)); 
    } 
}; 

var userItemViewModel = function (data){ 
    var self = this; 
    self.userId = ko.observable(data.userId); 
    self.userName = ko.observable(data.userName); 
    self.Selected = ko.observable(false); 
    self.Selected.subscribe(function(newValue){ 
    //individual selected checkbox 
     console.log(newValue); 
     console.log(self.userId()); 
     console.log(self.userName()); 
    }, self); 
} 

var viewModel = new userViewModel(); 
ko.applyBindings(viewModel); 
// Load data 
viewModel.loadData(); 

Answer 2

あなたの新しいメソッドuserViewModel：

self.SelectAll = function() { 
    self.items().forEach(function(item) { 
     item.Selected(true); 
    }); 
}; 

Answer 3

@haim770は、要素をループしてitem.Selected(true)に設定する必要があります。さて問題は、次のとおりです。

<input type="checkbox" data-bind="value:userId(),click:$root.toggle" /> 

• まず、チェックボックスはuserIdなくSelectedにマッピングされています。
• 第2に、チェックボックスには値バインディングがありません。それはchecked結合を持っています。だから、次のようになります。

<input type="checkbox" data-bind="checked:$data.Selected,click:$root.toggle" />

また、あなたが$rootを使用しないでください。あなたは{を置く場所、あなたの関数のスコープが始まる前に、変数を定義することはできません$parent.toggle

Working Fiddle