JSFiddle - React, Tailwind, and code Playground

by nveron

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div>
    <input data-bind="value: search, valueUpdate: 'keypress'"/>
</div>
<div>
    <comp1 params="{:n 'Root', arr: [1,2,3,4], arr2:[1,2,3], root: $data}"></comp1>
</div>

JavaScript

var VM = {
    nodeName: 'Je suis ton père',
    search: ko.observable('')
}

var comp1 = function(params) {          
    this.n = params.n || '';
    this.arr = params.arr || [],
    this.arr2 = params.arr2 || [];
    
    this.nodeName = "node" + params.n
    this.childs = ko.observableArray();
    this.visibleChilds = ko.computed(function(){
        return this.childs().filter(function(itm){  
            return itm.nodeName.indexOf(params.root.search()) >= 0 || itm.visibleChilds().length > 0;
            }
          );
    }, this);
    
    this.arr.forEach(function(i){
        this.childs.push(new comp1({n: i, arr: this.arr2, root: params.root}));
    }, this);
}

var comp1VM = { viewModel: comp1, template: '</span><span data-bind="text: nodeName"></span><ul data-bind="foreach: visibleChilds"><comp1 params="{n: n, arr: arr, arr2:arr2, root: $root}"></comp1></ul>' };

ko.components.register('comp1', comp1VM);

ko.applyBindings(VM);