Dotvvm - 渲染 DOM 元素后触发自定义绑定处理程序答案

【问题标题】：Dotvvm - fire custom binding handler after DOM elements are renderedDotvvm - 渲染 DOM 元素后触发自定义绑定处理程序
【发布时间】：2018-01-17 06:06:51
【问题描述】：

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

<li> 的 HTML 代码展开。正如我们所看到的，第一个<li> 得到了课程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。我将尝试解释每种类型。

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

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

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

我希望它在这个示例中得到更好的解释。

【问题讨论】：

你想达到什么目的？我们没有bp-state-collapsed 类，因为您可以使用:not(.bp-state-expanded)。
我用更好的解释更新了问题。我希望它会更容易理解
我明白了，对于可展开的折叠节点，您需要一个特定的 CSS 类。这是有道理的。

标签： dotvvm

【解决方案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 类。

【讨论】：