Question

使用bootstrap-treeview时是否有办法将“数据绑定”属性添加到节点？

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

我已经渲染了一个树视图，但是我需要绑定一个click事件来与我的淘汰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>

我需要以某种方式向此节点添加数据绑定。

... OR

也许我需要在我的淘汰视图模型中有一个淘汰obervableSomething，并将JSON加载到那里，以及可观察到树视图的数据绑定 - 不知何故？

编辑：

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

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

通过这样做，您可以在knockout中绑定DOM元素，然后为它们创建树视图。这种技术实际上适用于任何jquery插件或任何高度依赖DOM元素的库。

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

将数据绑定属性添加到Knockout的boostrap-treeview节点

1 个答案: