0

假设我想自定义 treeview 组件的 css 类。

<li>用于展开的 HTML 代码。如我们所见， 1st <li>got class bp-state-expanded。当它崩溃时，我想bp-class-collapsed上课而不是bp-state-expanded为了我的造型目的。

<li class="bp-item bp-state-focused bp-state-expanded" data-bind="css: $bpControl.getItemStyle($data)">
    <!-- ko if: HasCategories -->
    <a role="button" class="bp-expand">
    <i class="bp-icon fa fa-plus-square-o"></i></a>
    <a role="button" class="bp-collapse"><i class="bp-icon fa fa-minus-square-o"></i></a><!-- /ko --><label>
        <!-- ko if: $bpControl.canBeChecked($data) --><!-- /ko -->
        <i class="fa fa-circle-o"></i>
        <span><!-- ko text: Name -->Jazyky<!-- /ko --></span>
    </label><!-- ko template: { name: $findTemplateId("levelTemplate"), data: (AssignedToMenuItem) } --><!-- ko if: $data && $data.length -->
    <ul class="bp-list" data-bind="foreach: $data">

    </ul><!-- /ko --><!-- /ko -->
</li>

为了我的测试目的，我制作了这个简单的脚本，我想将子 DOM 元素存储到变量中。当我刷新页面并触发我的脚本时，尚未呈现树视图元素。

我尝试afterRender在数据绑定中使用，但没有任何成功。有没有办法在渲染所有 DOM 元素后触发这个处理程序，以便我可以使用 css 类进行操作？

ko.bindingHandlers["test"] = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    var data = bindingContext.$data.AdminMenuList();
    var parentDOM = element.children;
    ko.utils.arrayForEach(data, function (item) {
        if (item().HasCategories() == true){
            console.log(item().Name());
        }           
    });
}};

我在业务包树视图中的数据绑定

<bp:TreeView DataSource="{value: AdminMenuList}"
         SelectedValues="{value: AdminMenuSelectedList}"
         ItemKeyBinding="{value: Id}"
         ItemHasChildrenBinding="{value: HasCategories}"
         ItemChildrenBinding="{value: AssignedToMenuItem}"
         Changed="{command: RedirectTo()}"
         Validation.Enabled="false"
         data-bind="test: {afterRender: test }">
<i class="fa fa-circle-o"></i>
<span>{{value: Name}}</span>

更新

现在我用timeout函数解决了这个问题，但不确定这是否是好的方法。

在此处输入图像描述

我有 3 种类型的li. 我将尝试解释每种类型。

类型 1. => 它的可扩展元素和我需要的原因bp-class-collapsed是，因为我不想影响li类型 2,3，:not selector我需要这里的+图标。

类型 2. => 它的经典li重定向，所以我需要o这里的图标。如果我:not selector在这里使用，它也会影响这种类型。

类型 3. => 与类型 2 相同，但它是嵌套的li。

我希望它在这个样本上得到更好的解释。

4

1 回答 1

1

不支持直接在节点上应用自定义 CSS 类。但我们将在下一个版本中添加请求的 CSS 类。现在，您可以修改我们的 API 来做您想做的事。

let TreeView = DotVVM.BusinessPack.Controls.TreeView,
originalGetItemStyle = TreeView.prototype.getItemStyle;

TreeView.prototype.getItemStyle = function(item) {
    let style = originalGetItemStyle.call(this, item);
    style["expandable"] = this.hasChildren(item);
    return style;
};

请注意这是我们的内部 API，它可能会在未来的版本中发生变化。在大多数情况下，您应该在 ItemTemplate 中使用您的 CSS 类。

于 2017-08-10T09:40:19.640 回答