Jquery 使用复选框淘汰JS treeview

在我的淘汰应用程序中有一个模块，我希望有一个带有复选框的树型结构。我正试图实现以下目标

• 如果我选择子节点，则该节点中的所有父节点和父节点都会被选中，但会使用不同的图标。像这样的
• 如果用户选择父项，则其所有子项都将按如下方式选择

---

在开始为它制作自己的插件之前，knockout是否有类似的东西，我可以将其作为基础并在此基础上构建？

我认为使用一些与DOM元素挂钩的库（如jstree）是不好的方法。因此，最好在htlm中分离数据模型及其解释

下面是一个例子：

---

通常，您使用您想要的任何插件，如jstree或其他插件，然后为其编写自定义绑定。另一个选择是Oracle JET，它是一个基于knockout的spa框架，它有大量的组件。这是我一直在玩的一把小提琴，但我想递归调用该函数。我要问一个关于在堆栈溢出上执行此操作的附加问题

ko.bindingHandlers.prop = {
    update: function(element,valueAccessor) {
        var props = ko.toJS(valueAccessor());
        for (prop in props){
            element[prop] = ko.unwrap(props[prop]);
        }
    }
}


function model(folders){
    this.folders = ko.observableArray(ko.utils.arrayMap(folders,function(folder){
        return new modelFolder(folder);
    }));
};


function modelFolder(folder,parent){
    this.name = ko.observable(folder.name);
    this.checked = ko.observable(folder.checked);
    this.parent = parent;

    this.folders = ko.observableArray(
        folder.folders ?
            ko.utils.arrayMap(folder.folders,function(folder){
                return new modelFolder(folder,this);
            }.bind(this))
            : null
    );

    this.checkedChildFolders = ko.pureComputed(function(){
        return ko.utils.arrayFilter(this.folders(),function(folder){
            return folder.checked() || folder.checkedAllChildFolders() || folder.checkedSomeChildFolders()
        });
    },this)

    this.checkedSomeChildFolders = ko.pureComputed(function(){
        return this.folders().length>0 && !this.checkedAllChildFolders() && this.checkedChildFolders().length > 0 
    },this);

    this.checkedAllChildFolders = ko.pureComputed(function(){
        return this.folders().length>0 && this.checkedChildFolders().length == this.folders().length
    },this)  
}

modelFolder.prototype.setCheck = function(check){
    this.checkParents(check);
    this.checkMeAndChildrens(check);
}

modelFolder.prototype.checkMeAndChildrens = function(check){
    this.checked(check);
    ko.utils.arrayForEach(this.folders(),function(folder){
        folder.checkMeAndChildrens(check);
    });
}   

modelFolder.prototype.checkParents = function(check){
    if(this.parent){
        this.parent.checked(check);
        this.parent.checkParents(check);
    }
}


ko.applyBindings(new model([
    {"name":"Lorem", "folders":[
        {"name":"Dolor","folders":[
            {"name":"Hello","folders":[
                {"name":"Lorem"},
                {"name":"Dolor","checked":true},
                {"name":"Sit amet"}
            ]},
            {"name":"Bye"},
        ]},
        {"name":"Sit amet"}
    ]},
    {"name":"Ipsum"}
]));