Dotvvm - 呈现DOM元素后的自定义绑定处理程序

Question

假设我想自定义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。我会尝试解释每种类型。

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

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

类型3 =＆gt;与类型2相同，但其嵌套li。

我希望它能更好地解释这个样本。