foreach가 렌더링을 완료했을 때의 사용자 지정 바인딩

Question

나는 관찰 가능한 배열에 ul에 바인딩 된 항목이 있습니다. 아이템이 추가 된 후에 전체 li 세트의 전체 너비를 계산해야합니다. 따라서 ul 요소의 너비를 자식의 전체 너비 인 li 요소로 설정할 수 있습니다.

foreach 바인딩을 사용하면 어떻게해야합니까?

<div> 
    <h2 data-bind="visible: items().length">Test</h2> 
    <ul data-bind="foreach: { data: items, afterAdd: $root.myAfterAdd }"> 
     <li data-bind="text: name"></li> 
    </ul> 
</div> 

그리고 자바 스크립트 :

var viewModel = { 
    items: ko.observableArray([ 
     { name: "one" }, 
     { name: "two" }, 
     { name: "three" } 
     ]), 
    myAfterAdd: function(element) { 
     if (element.nodeType === 1) { 
      alert("myAfterAdd"); 
     } 
    }, 
    addItem: function() { 
     this.items.push({ name: 'new' }); 
    } 
}; 


ko.applyBindings(viewModel); 

// once foreach has finished rendering I have to set the width 
// of the ul to be the total width of the children! 

나는 내가 '갱신'각 요소가 추가 된 후 ul의 폭, 불행하게도 나는 afterAdd가에 대한 발생하지 않는 것을 발견 할 수 afterAdd를 사용하여 시도 초기 항목! 추가 항목 ... li 항목 내부의 내용을 알 수없는 폭 될 것

참고 :

은 샘플 시나리오에 대해 this fiddle를 참조 밀어 경우에만 실행됩니다.

Answer 1

도움이되기를 바랍니다에게 있습니다 해결책을 찾았습니다. (값이 관찰되지 않은 경우 한 번만 나) 업데이트가 발생할 때마다

ko.bindingHandlers.runafter = { 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(); 
     setTimeout(function (element, value) { 
      if (typeof value != 'function' || ko.isObservable(value)) 
       throw 'run must be used with a function'; 

      value(element); 
     }, 0, element, value); 
    } 
}; 

이 핸들러가 발광 : foreach는 이것을 달성하는 방법은 사용자 지정 이벤트 핸들러를 등록 너무입니다.

더 중요한 것은 foreach 루프가 완료되면 실행됩니다!

here을 참조하십시오.

Answer 2

당신은 같은 것을 할 수 있습니다 : 어떤 버킷

var viewModel = { 
    items: ko.observableArray([ 
     { name: "one" }, 
     { name: "two" }, 
     { name: "three" } 
     ]), 
    myAfterAdd: function(event) { 
     if (event.originalEvent.srcElement.nodeType === 1) { 
      alert("myAfterAdd"); 
     } 
    }, 
    addItem: function() { 
     this.items.push({ name: 'new' }); 
    } 
}; 


$('#bucket').bind('DOMNodeInserted DOMNodeRemoved', viewModel.myAfterAdd); 

ko.applyBindings(viewModel); 

은 UL 요소

See fiddle

내가 많이 나는이 '인터넷 검색'후

Answer 3

비슷한 문제가있었습니다. 이것을 사용하여 초기 계산을 할 수 있습니다.

ko.bindingHandlers.mybinding { 
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
      var foreach = allBindings().foreach, 
       subscription = foreach.subscribe(function (newValue) { 
       // do something here (e.g. calculate width/height, use element and its children) 
       subscription.dispose(); // dispose it if you want this to happen exactly once and never again. 
      }); 
     } 
}