원인 tempade 노드 바인딩을 사용할 때 내 열 모델의 변경 사항을 기반으로 데이터 열을 다시 그릴 수 있습니다.

Question

내 문제 시나리오는 this one과 거의 동일하지만 그림에있는 테이블에 TD 바인딩 셀이 더 복잡합니다. 바인드되고있는 열 때로는 고유 한 HTML 일뿐입니다.

즉, databind=foreach을 사용하여 열을 반복하고 text 바인딩을 사용하는 <TD>을 중첩하는 것만으로는 충분하지 않습니다.

나는 .. 나는 DOM의 배열을 전달 곳하는 template{nodes:xxx} 바인딩 노드 사용, 초기 페이지 무승부 렌더링 내 테이블을 얻을 수있는이 같은 :

<table> 
     <thead> 
      <tr> 
       <!-- ko foreach: ColumnModel.VisibleColumns --> 
       <th data-bind="click:$root.ColumnModel.ColumnSortClick,text:ColName"></th> 
       <!-- /ko --> 
      </tr> 
     </thead> 
     <tbody> 
      <!-- ko template: { nodes: ColumnModel.getRowTmplNodes(), foreach: DataItems} --> 
      <!-- /ko --> 
     </tbody> 
    </table> 

문서는 DOM는 노드한다고 이 변수에 전달하는 것은 observableArray가 될 수 없습니다. 여러분이 상상할 수 있듯이, 사용자가 열 모델을 업데이트하도록 허용하면 < THEAD에서 머리글 레이블 만 변경되지만 데이터 열은 업데이트되지 않습니다.

어떻게해야합니까? 바인딩 사용자 정의 녹아웃을 사용하여 해결

Answer 1

described originally here by Michael Best

HTML :

<table> 
    <thead> 
     <tr> 
     <!-- ko foreach: ColumnModel.VisibleColumns --> 
      <th data-bind="click:$root.ColumnModel.Column_Click" style="cursor:pointer;"><span data-bind="visible:SortDirection,css:IconClass" style="font-size:small"></span><span data-bind="text:ColName"></span></th> 
     <!-- /ko --> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach:{data:DataItems,as:'thg'}"> 
     <tr data-bind="nodes: $root.ColumnModel.getRowTemplate()"></tr>     
    </tbody> 
</table> 

KO 바인딩 :이

//THANK YOU, MICHAEL BEST: 
ko.bindingHandlers.nodes = { 
    init: function() { 
    return {controlsDescendantBindings: true}; 
    }, 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var nodes = ko.unwrap(valueAccessor()); 
    ko.virtualElements.setDomNodeChildren(element, nodes); 
    ko.applyBindingsToDescendants(bindingContext, element); 
    } 
}; 
ko.virtualElements.allowedBindings.nodes = true;