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

问题描述：

使用bootstrap-treeview时是否可以将数据绑定"属性添加到节点?

Is there a way to have "data-bind" properties added to a node when using the bootstrap-treeview ?

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

我已经渲染了一个树状视图，但是我需要绑定一个click事件以与我的剔除ViewModel进行交互.

I have rendered a treeview, but I need to bind a click event to interact with my knockout ViewModel.

对于一个节点，我需要在每个节点上添加data-bind="click: ViewNodeData".

For a node, I need to add data-bind="click: ViewNodeData" to each node.

一个节点，一旦渲染，看起来像这样:

A node, once rendered, looks like this:

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

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

I need to somehow add a data-bind to this node.

或...

也许我需要在基因剔除视图模型中有一个基因剔除obervableSomething，然后将JSON加载到其中，以及将数据绑定到树视图的某种方式-

Maybe I need to have a knockout obervableSomething in my knockout view model, and load the JSON into that, and the data-bind that observable to the tree view - somehow?

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

I see someone has asked for this functionality to be added and has created a pull request on github - but not sure how to get the latest version WITH this additional functionality. I'm not sure the developer is still active.

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

有没有办法做到这一点?

Is there a way to get this?

此刻，我在树视图中填充以下内容:

At the moment, I populate my treeview with the following:

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，在此之后我将其绑定:

Where vm is my ViewModel, which I bind after this:

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

答

请注意，即使您被允许添加数据绑定之类的自定义属性，但如果您之前应用绑定(ko.applyBindings)也将无法使用树视图将插入到DOM中.

Note, that even if you will be allowed to add custom attributes like data-bind, it won't work if you apply bindings (ko.applyBindings) before the tree view is inserted into DOM.

因此，我认为最好的方法是创建自定义基因剔除绑定，您可以在其中访问DOM元素.例如，它可能看起来像这样:

Therefore in my opinion, the best way to do it is to create a custom knockout binding, where you have an access to the DOM element. For example, it could look like this:

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元素的库.

By doing that, you can bind the DOM element in knockout and then create treeview for them. This technique actually applies to any jquery plugin or any library that highly relies on DOM elements.

发布更多代码后.我认为您想要做的是在获取数据后直接应用applyBindings.因此，在$.get完成功能中，您想要将接收到的数据设置为viewmodel中的可观察数组，然后设置为ko.applyBindings.在HTML中，为具有自定义绑定的#tree元素创建数据绑定.在自定义绑定中，您知道了可观察数组，因为它在您的vm中，您可以轻松调用$().treeview({data: [get array/object from your vm]})

after you posted more of your code. I think what you want to do is to applyBindings directly after fetching the data. So in the $.get done function, you want to set the received data as the observable array in the viewmodel, and then ko.applyBindings. In the HTML, you create data-bind for #tree element, that has a custom binding. In the custom binding, you know the observable array, since it is in your vm and you can easily call $().treeview({data: [get array/object from your vm]})

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

相关推荐