AJax 호출 후 녹아웃 템플릿 바인딩 요소를 사용할 수 없습니다.

Question

afterRender 이벤트에서 AJAX 호출로 트리거 된 녹아웃 템플릿에 의해 만들어진 요소에 바인딩하는 데 문제가 있습니다. 이 Fiddle에서 볼 수 있듯이 결과는 제대로 렌더링되지만 afterRender 이벤트 핸들러에서는 요소를 사용할 수 없습니다.

질문 ...

• 어떻게 템플릿 심지어는 afterRender 이벤트 핸들러가 실행될 때 렌더링 된 것으로 나타나지 않기 때문에 제대로 렌더링입니까?

• 왜 AJAX 호출이 결과에 영향을 줍니까? AJAX 호출 위의 행의 주석 처리를 제거하면 afterRender 이벤트에서 템플릿 요소를 사용할 수 있습니다. 여기

코드 ...

HTML입니다

<div id="plugin" data-bind="template: { name: 'fooTemplate', data: $data, afterRender: postProcess }"></div> 
<br /> 
<br /> 
<hr /> 
<div id="results"></div> 

<script type="text/html" id="fooTemplate"> 
    <div data-bind="foreach: items()"> 
     <span data-bind="text: displayText"></span> 
    </div> 
</script> 

JAVASCRIPT

var data = { 
    items: [{ 
     displayText: 'Name', 
    }, { 
     displayText: 'Last Login Date', 
    }, { 
     displayText: 'Email', 
    }] 
}; 

function DataModel() { 
    var self = this; 
    self.items = ko.observableArray([]); 
    self.data = ko.dependentObservable(function() { 
     //self.items(data.items);// <<== UNCOMMENT THIS LINE AND THE postProcess FUNCTION SHOWS FULLY RENDERED DOM 
     $.ajax({ 
      url: '/some/path', 
      error: function() { 
       self.items(data.items); 
      } 
     }); 
    }); 

    postProcess = function() { 
     $('#results').text($('#plugin').html()); 
    } 
} 

dataModel = new DataModel(); 
ko.applyBindings(dataModel); 

한 노트 ... 바이올린은에 AJAX 호출을 가짜 주소. 이것은 바이올린이 서버 종속성을 갖지 않기 때문입니다. error 속성은 템플릿을 실행하게하는 데이터를 변경하는 데 활용됩니다. 그러나, 내 개발 환경에서 유효한 URL을 호출하면 바이올린에 표시된 것과 동일한 결과가 산출됩니다. 또한 서버에서 반환 된 데이터를 사용하여 템플릿을로드하지 않습니다. 오히려 바이올린은 맨 위에 정적으로 정의 된 데이터 소스를 사용합니다 (다시 한 번 문제를 데모하기 위해).

Answer 1

예제를 보면 비동기 문제가 발생합니다. 템플릿은

를 렌더링

새 값으로 업데이트됩니다

1. dependentObservable 화재가 값
2. self.items를 업데이트하려면 다음 흐름은 $ 아약스 호출없이 작동 방법은 다음과

   입니다 postProcess 메소드가 호출되고 모든 것이 잘 보입니다.

그러나 $ 아약스 호출을

는 완료 (오류) 방법은 콜백, 그래서 흐름의 변화 :

는

1. dependentObservable는 (! 사용하는 대신 ko.computed) 값을 업데이트하는 화재
2. 서버에 $ .ajax 호출이 이루어집니다.
3. done (또는 error) 콜백은 완료 될 때까지 대기합니다.
4. 템플릿 렌더링
5. postProcess 메서드가 아직 호출되었습니다. 아직 self.items가 여전히 비어 있습니다.
6. 서버가 응답하여 self.items를 업데이트하기 때문에 완료 콜백이 실행됩니다.
7. 렌더링 된 템플릿은 여전히 ​​사용자의 뷰 모델에 바인딩되어 렌더링 된 템플릿이 업데이트됩니다.

당신이 주석 처리 한 상황을 허용하기 위해 귀하의 dependentObservable에서 아약스 호출을 끌어 오는 것이 가장 쉬운 해결책이라고 생각합니다.