Dotvvm

Question

假设我想自定义 css class 树视图组件。

HTML <li> 代码展开。正如我们所见，第一个 <li> 得到了 class bp-state-expanded。当它倒塌时，我希望使用 bp-class-collapsed class 而不是 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 classes 进行操作？

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 的原因是，因为我不想用 :not selector 影响 li 类型 2,3 和我这里需要 + 图标。

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

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

我希望它能更好地解释这个示例。

Answer 1

不支持直接在节点上应用自定义 CSS classes。但我们将在下一个版本中添加请求的 CSS class。现在，您可以修改我们的 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 classes。

Dotvvm - 在呈现 DOM 个元素后触发自定义绑定处理程序

Dotvvm - fire custom binding handler after DOM elements are rendered