Добавить свойство привязки данных к узлу boostrap-treeview для нокаута

Question

Есть ли способ добавления свойств «привязки данных» к узлу при использовании bootstrap-treeview?

https://github.com/jonmiles/bootstrap-treeview

Я вынес TreeView, но мне нужно, чтобы связать событие нажатия кнопки мыши, чтобы взаимодействовать с моим нокаутом ViewModel.

Для узла мне нужно добавить data-bind="click: ViewNodeData" к каждому узлу.

узел после того, как оказывается, выглядит следующим образом:

<li class="list-group-item node-tree" data-nodeid="13" style="color:undefined;background-color:undefined;"> 
    <span class="indent"></span> 
    <span class="indent"></span> 
    <span class="icon glyphicon"></span> 
    <span class="icon node-icon"></span> 
    A photo taken by me 
</li> 

мне нужно каким-то образом добавить данные привязку к этому узлу.

ИЛИ ...

Может быть, мне нужно иметь сокрушительный obervableSomething в моей модели представления нокаута, и загрузить JSON в том, что и данные привязку, что наблюдаемый на дереве - как-то?

EDIT:

Я вижу, что кто-то попросил эту функциональность быть добавлены и создал запрос тянуть на GitHub - но не уверен, как получить последнюю версию С этой дополнительной функциональности. Я не уверен, что разработчик все еще активен.

https://github.com/jonmiles/bootstrap-treeview/pull/310

Есть ли способ, чтобы получить это?

На данный момент, я заполнить мой TreeView следующим:

var urialbums = '/api/Photo/GetAlbums'; 
$.get({ url: urialbums, contentType: "application/json" }) 
    .done(function (data) { 
     // vm.Albums(data.to); 
     $('#tree').treeview({ data: data }) 
      .on('nodeSelected', function (event, data) { 
       if (data.levelId == 2) { 
        vm.SelectedImageID(data.id); 
        var img = document.getElementById('imgContainer'); 
        img.src = data.data; 
       } 
     }); 
    }); 

Где ут мой ViewModel, который я связываю после этого:

ko.applyBindings(vm, document.getElementById("ImagesSection")); 

Answer 1

Обратите внимание, что даже если вы будете разрешено добавлять настраиваемые атрибуты, такие как привязка данных, это не сработает, если вы примените привязки (ko.applyBindings) до того, как древовидное представление будет вставлено в DOM.

Поэтому, на мой взгляд, лучший способ сделать это - создать custom knockout binding, где у вас есть доступ к элементу DOM. Например, это может выглядеть следующим образом:

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     $(element).treeview({data: getTree()}); //getTree() or use allBindings where you store the data that is needed for treeview 
    } 
}; 

Делая это, вы можете связать элемент DOM в нокауте, а затем создать TreeView для них. Этот метод действительно применим к любому плагину jquery или к любой библиотеке, которая очень полагается на элементы DOM.

EDIT: после того, как вы разместили больше своего кода. Я думаю, что вы хотите сделать, это применитьBindings непосредственно после получения данных. Итак, в функции $.get, вы хотите установить полученные данные в качестве наблюдаемого массива в viewmodel, а затем ko.applyBindings. В HTML вы создаете привязку данных для элемента #tree, который имеет настраиваемую привязку. В пользовательской привязке вы знаете наблюдаемый массив, так как он находится в вашем vm, и вы можете легко позвонить $().treeview({data: [get array/object from your vm]})