Как обработать клик по элементу вложенного списка?

Question

[wolf-9830]

Получаю вложенный список json-ом с сервера. Формирую из него массив объектов TreeNode:

var TreeNode = function() {
      var self = this;
      self.id = -1;
      self.name = '';
      self.children = [];
      return self;
    };

    function formatTree(element) {
        var node = new TreeNode();
        node.id = element.id;
        node.name = element.name;
        if (typeof element.children != "undefined") {
            element.children.forEach(function(item) {
                node.children.push(formatTree(item));
            });
        }
        return node;
    }

И вывожу вложенный список рекурсивным шаблоном:

<ul data-bind="template: {name: 'treeTemplate', foreach: tree}"></ul>
                <button class="button" style="height: 40px; width: 100%; margin-bottom: 7px; border: 1px solid" data-bind="click: back">Назад</button>

...

<script type="text/html" id="treeTemplate">
        <li><button class="button" data-bind="text: name, click: $parent.clickTree"></button></li>
        <!-- ko ifnot: typeof children == "undefined" -->
            <ul data-bind="template: {name: 'treeTemplate', foreach: children}"></ul>
        <!-- /ko -->
    </script>

Вся фишка в функции data-bind="text: name, click: $parent.clickTree"
В ней выводится данные, по которым произошел клик:

self.clickTree = function(data) {
            console.log(data);
        };

Но клик срабатывает только тогда, когда я кликаю по первому элементу списка, т.е. клик не срабатывает, если было нажатие например на children первого элемента, как сделать, чтобы я мог получать TreeNode объект по нажатию на него.