Dotvvm - DOM要素がレンダリングされた後にカスタムバインディングハンドラを起動します

Question

treeviewコンポーネントのCSSクラスをカスタマイズしたいとします。

<li>のHTMLコードです。ご覧のとおり、<li>はbp-state-expandedとなりました。倒れたとき、私はbp-state-expandedの代わりにbp-class-collapsedクラスを持っていたいと思っています。

<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要素を変数に格納したいこの簡単なスクリプトを作成しました。私がページをリフレッシュしてスクリプトが起動すると、treeview要素はまだレンダリングされていません。

私はafterRenderをデータバインディングで使用しようとしましたが、成功しませんでした。 CSSのクラスで操作できるように、すべてのDOM要素がレンダリングされた後にこのハンドラを起動する方法はありますか？私はこれは良いaproachであるかどうかわからtimeout機能を使用していることは解決ではなく、

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> 

UPDATE

で。

私はliの3種類を得ました。私はそれぞれのタイプについて説明しようとします。 1. =>その拡張可能な要素とその理由は、なぜ私はbp-class-collapsed必要

タイプは、私が:not selectorでliタイプ2,3に影響を与えるようにしたいといけないので、私はここに+アイコン必要、ということです。

タイプ2. =>その古典的なliはリダイレクトされているので、ここにはoアイコンが必要です。ここで:not selectorを使用すると、このタイプにも影響します。

タイプ3 =タイプ2と同じですが、ネストされたliです。

私はこのサンプルについてより詳しく説明したいと思います。

Answer 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; 
}; 

これはGoogleの社内APIであり、今後のリリースでは変更される可能性があります。ほとんどの場合、ItemTemplate内でCSSクラスを使用する必要があります。