2

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

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"));
4

1 回答 1

2

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

因此，在我看来，最好的方法是创建一个自定义的敲除绑定，您可以在其中访问 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具有自定义绑定的元素创建数据绑定。在自定义绑定中，您知道可观察数组，因为它在您的虚拟机中，您可以轻松调用$().treeview({data: [get array/object from your vm]})

于 2017-01-07T19:05:54.313 回答