将 data-bind 属性添加到用于 Knockout 的 bootstrap-treeview 节点

Question

有没有办法在使用引导树视图时将“数据绑定”属性添加到节点？

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

我已经渲染了一个树视图，但是我需要绑定一个点击事件来与我的淘汰视图模型交互。

对于一个节点，我需要给每个节点加上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 加载到其中，并将可观察到的数据绑定到树视图 - 不知何故？

编辑：

我看到有人要求添加此功能并在 github 上创建了一个拉取请求 - 但不确定如何获得具有此附加功能的最新版本。我不确定开发者是否仍然活跃。

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

有没有办法得到这个？

目前，我使用以下内容填充树视图：

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;
                }
        });
    });

其中 vm 是我的 ViewModel，我在此之后绑定它：

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

Answer 1

请注意，即使允许您添加自定义属性（如 data-bind），如果您在将树视图插入 DOM 之前应用绑定 (ko.applyBindings)，它也将不起作用。

因此，在我看来，最好的方法是创建一个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 元素，然后为它们创建树视图。这种技术实际上适用于任何 jquery 插件或任何高度依赖 DOM 元素的库。

编辑：在您发布更多代码之后。我认为您想要做的是在获取数据后直接应用绑定。所以在$.getdone函数中，你要设置接收到的数据为viewmodel中的observable数组，然后ko.applyBindings。在 HTML 中，您为 #tree 元素创建数据绑定，该元素具有自定义绑定。在自定义绑定中，您知道 observable 数组，因为它在您的 vm 中，您可以轻松调用 $().treeview({data: [get array/object from your vm]})