Is there a way to handle 3 level checkboxes with knockout

余生颓废 提交于 2020-01-07 02:25:08

问题


I have the following ko markup which are two nested ol with checkboxes

<label><input type="checkbox" data-bind="checkedValue:true, checked: selectAll" />Check all</label>

<ol data-bind="foreach: Itemsnum">
    <li>
    <li><label><input type="checkbox" data-bind="checkedValue:true, checked: selectedOptionnum" />
    <span data-bind="text: Name"></span></label></li>
    <ol style="margin-left:10px" data-bind="foreach: $parent.Itemsabc">
      <li style="margin-left:10px"><label><input type="checkbox" data-bind="checkedValue:true,checked: selectedOptionabc"/>
      <span data-bind="text: Name"></span></label></li>

    </ol>
    </li>
</ol>

and this is my model

var viewModel = new
function() {
    var self = this;
    self.Itemsnum = [
        { Name: 'Option 1',
        Value: 'o1'},
        { Name: 'Option 2',
        Value: 'o2'},
    {
        Name: 'Option 3',
        Value: 'o3'},
    {
        Name: 'Option 4',
        Value: 'o4'}
    ];
     self.Itemsabc = [
        { Name: 'Option a',
        Value: 'oa'},
        { Name: 'Option b',
        Value: 'ob'},
    {
        Name: 'Option c',
        Value: 'oc'},
    {
        Name: 'Option d',
        Value: 'od'}
    ];
    self.selectedOptionnum = ko.observable(false);
    self.selectedOptionabc = ko.observable(false);
    self.selectAll = ko.observable();
   /* self.selectAll = ko.computed({
        read: function() {
            var firstUnchecked = ko.utils.arrayFirst(self.Itemsnum, function(item) {
                return item.selectedOptionnum() == false;
            });
            return firstUnchecked == null;
        },
        write: function(value) {
            ko.utils.arrayForEach(self.Itemsnum, function(item) {
                item.selectedOptionnum(value);
            });
        }
    });*/
};

ko.applyBindings(viewModel);

I tried to adapt the following example http://jsfiddle.net/romanych/aGFmQ/ and propagate the checked behavior between parents but I get errors. I want to have all the cheked boxed checked, when checked all is clicked and for option[number] all the related option[abc]. Anyone has a clue ? thanks

fiddle

来源:https://stackoverflow.com/questions/38724919/is-there-a-way-to-handle-3-level-checkboxes-with-knockout

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!