2011-08-02 4 views
0

knockoutjs bg 및 색상이 맞습니까?)하지만 :액세스 내부 나는이 같은 템플릿이 템플릿

NoteRight div와 동일한 높이의 NoteDate div를 설정하고 싶습니다.

$(function() { 
    ko.applyBindings(new viewModel()); 

    $(".Note").each(function (index, element) { 
     var date = $(element).find(".NoteDate"); 
     var note = $(element).find(".NoteRight"); 

     date.height(note.height()); 
    }); 
}); 

을하지만 노트 Ajax를 사용하여 검색하고 내가 async: false와 그 전화를해야 할 또는 주석이 "각"이 실행되기 전에 인출되지 않기 때문에이 좀 느린 : 나는 실제로 JS에서 그 일을 해요 .

So : 코드를 템플릿으로 "변환"할 수 있습니까? 나는 다음과 같이 시도했다 :

<div class="NoteDate" 
    data-bind="style: { backgroundColor: background, 
         color: color, height: $('.NoteRight').height() }"> 

그러나 그것은 작동하지 않는다.

은 심지어 더 주위 하구 후, 지금은이 기능 (afterRender)가 :

this.updateNotesLayout = function (elements) { 
    var date = $(elements).find(".NoteDate"); 
    var note = $(elements).find(".NoteRight"); 
    alert(date.height()); 
    alert(note.height()); 
    date.height(note.height()); 
    alert(date.height()); 
} 

그러나 날짜와 음 높이가 0이지만, 이전의 예에서, 높이가 두 경우 모두에서 정확했다.

아이디어가 있으십니까?

답변

1

템플릿으로 렌더링 된 요소에 대해 코드를 실행하는 가장 쉬운 방법은 템플릿 바인딩의 afterRender 콜백을 사용하는 것입니다.

http://knockoutjs.com/documentation/template-binding.html#note_4_using_the__option

이것은 당신이 당신의 새로운 노드에서 코드를 실행할 수 있습니다. foreach 상황에서 이것은 각 항목에 대해 실행됩니다.

+0

감사합니다. 문제가 발생했습니다. 내 질문을 편집했습니다. –

+0

afterRender를 실행하는 동안 노드가 실제로 DOM에 있지 않으므로 타이밍 문제가 발생할 수 있습니다. 한 가지 해결 방법은 다음과 같이 setTimeout에서 작업을 수행하는 것입니다. setTimeout (function() {yourcode;}, 0) –

+0

시간 제한을 사용하여 코드 예제로 응답을 업데이트 할 수 있습니까? 임씨는 정말 웹 개발자에게 새로운 것을 사려고합니다. NVM, 알았다. –