Durandal 작성시 올바르지 않은 바인딩 처리

Question

Durandal은 뷰 모델을 바인딩하기 전에 바인딩하고 jquery를 사용하여 요소 크기를 확인하려고하면 항상 0을 반환합니다. jQuery가 보이지 않는 요소의 올바른 크기를 얻을 수 없거나 보이지 않는 컨테이너에 있습니다.

ellipsis와 나머지 텍스트를 라인의 일부 번호와 텍스트를 제한하고 대체 내 바인딩 핸들러, durandal 페이지를 바인딩 할 때 작동하지만, 요소

ko.bindingHandlers.ellipsis = { 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     ko.bindingHandlers.text.update(element, valueAccessor); 
     var lines = allBindings.get('lines'); 

     var $element = $(element); 
     var lineHeight = 1.3; 
     var heigth = lines * (+$element.css('font-size').substr(0, 2)) * lineHeight; 

     while ($element.outerHeight() > heigth) { 
      $element.text(replaceLast); 
     } 

     function replaceLast(index, text) { 
      return text.replace(/\W*\s(\S)*$/, '...'); 
     } 
    } 
}; 

내가 볼 때, 두 번째 업데이트 후 작동하지 않습니다 jQuery.customSelect을 바인딩 처리기를 통해 사용하고 수동으로 콜백 바인딩을 사용했을 때도이 문제가 발생했습니다.

Answer 1

지연 바인딩 처리기를 사용하십시오. Durandal docs에서 ,

때때로 바인딩 핸들러는 뷰의 전체 구성이 완료 될 때 그것이 DOM에 부착 된 후에 만 ​​요소와 함께 작동하도록해야합니다. 예를 들어 HTML 요소의 크기를 측정해야하는 코드가 있습니다. Durandal은 녹아웃 바인딩 처리기를 등록하는 방법을 제공하므로 구성이 완료 될 때까지 실행되지 않습니다. 이렇게하려면 composition.addBindingHandler를 사용하십시오. 한 가지 공통적 인 용도는 요소를 집중시키는 데 있습니다.

composition.addBindingHandler('ellipsis', { 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     ko.bindingHandlers.text.update(element, valueAccessor); 
     var lines = allBindings.get('lines'); 

     var $element = $(element); 
     var lineHeight = 1.3; 
     var heigth = lines * (+$element.css('font-size').substr(0, 2)) * lineHeight; 

     while ($element.outerHeight() > heigth) { 
      $element.text(replaceLast); 
     } 

     function replaceLast(index, text) { 
      return text.replace(/\W*\s(\S)*$/, '...'); 
     } 
    } 
}); 

:

그래서 당신의 bidning 처리기는 다음이 될 것입니다

: 기존 등록 바인딩 핸들러가있는 경우, 당신은 단순히 이렇게하여 실행 시간을 변경할 수 있습니다