1

Olá,

Eu preciso criar uma treeview que aceite um observable como entrada para que a medida que eu remova/adicione um nó na árvore a mesma atualize. Andei pesquisando e muitas pessoas utilizam o template biding para fazer isso entretanto, ainda estou meio confuso com relação a sua utilização.

Abaixo segue a minha tentativa de código. Nela eu cnsigo imprimir apenas o primeiro elemento da árvore e não seus filhos.

var ViewModel = function(){
	self = this;
	self.data = ko.observable(data);
   	
  debugger;
}

var data = {
    items: [{
        "name": "MORPHED",
        "items": [{
            "name": "5 Day",
            "items": [{
                "CategoryId": 20,
                "name": "30 day countdown"
            }, {
                "CategoryId": 19,
                "name": "Staffing your program"
            }, {
                "CategoryId": 22,
                "name": "Emergency/Medical Information"
            }, {
                "CategoryId": 18,
                "name": "Promoting your program"
            }, {
                "CategoryId": 21,
                "name": "Week of camp"
            }]
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }, {
            "name": "Age Targeted",
            "items": []
        }]
    }, {
        "name": "CREATE",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }, {
        "name": "INNOVATE",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }, {
        "name": "ENVISION",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }]
};

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="template: { name: 'itemTmpl', foreach: $root.data().items }"></ul>

<script id="itemTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'itemTmpl', foreach: $root.data().items }">
        </ul>
    </li>
</script>

Aqui segue o exemplo que estou me baseando.

1 Resposta 1

1

Sua pergunta pode ser dividida em duas. A primeira se refere a mostrar a árvore, com um template recursivo. A segunda se refere a realizar operações de edição/inclusão/exclusão de itens na árvore.

1. Recursividade

Para usar o template (sem as funções de adicionar ou remover) você primeiro, precisa saber para onde seus templates estão apontando:

O código abaixo não funciona porque você está apontando para data() como uma função, sendo que ele é apenas o nome da sua variável.

     <ul data-bind="template: { name: 'itemTmpl', foreach: $root.data().items }"></ul>

Para o primeiro nível da árvore você precisa apenas apontar para as propriedades do modelo que você quer mostrar, nesse caso, items, assim :

     <ul data-bind="template: { name: 'itemTmpl', foreach: $root.items }"></ul>

Ou assim (já que o primeiro nível já é $root):

     <ul data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>

Agora nos níveis abaixo, como você não está mais no $root é necessário referenciar o item atual com $data.items no foreach:

<script id="itemTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }">
        </ul>
    </li>
</script>

Assim a sua recursividade já está feita.

Fiddle

var data = {
    items: [{
        "name": "MORPHED",
        "items": [{
            "name": "5 Day",
            "items": [{
                "CategoryId": 20,
                "name": "30 day countdown"
            }, {
                "CategoryId": 19,
                "name": "Staffing your program"
            }, {
                "CategoryId": 22,
                "name": "Emergency/Medical Information"
            }, {
                "CategoryId": 18,
                "name": "Promoting your program"
            }, {
                "CategoryId": 21,
                "name": "Week of camp"
            }]
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }, {
            "name": "Age Targeted",
            "items": []
        }]
    }, {
        "name": "CREATE",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }, {
        "name": "INNOVATE",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }, {
        "name": "ENVISION",
        "items": [{
            "name": "5 Day",
            "items": []
        }, {
            "name": "4 Day",
            "items": []
        }, {
            "name": "1/2 Day",
            "items": []
        }]
    }]
};
 
ko.applyBindings(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>

<script id="itemTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }">
        </ul>
    </li>
</script>

2. Operação nos itens

O segundo problema é um pouco mais complexo, visto que você precisa que o seu array seja observável como um todo. Um observableArray permite que itens adicionados ou removidos sejam automaticamente refletidos no seu array, dessa forma você precisa de um modelo que contenha essas operações. Para evitar verbosidade , postarei o mínimo para esse conjunto de operações:

Modelo funcionando com as operações necessárias: https://jsfiddle.net/claykaboom/m4vws8s2/

Modelo com dados pré-carregados através de recursão: https://jsfiddle.net/claykaboom/vb80r7xr/

1
  • 1
    Muito obrigado, era isso mesmo que eu estava procurando fazer.
    – Guto
    13/07/2016 às 16:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .