바인딩과 스크립트의 경우 녹아웃 js

Question

바인딩 인 경우 knockoutjs에 문제가 있습니다. 바인딩을 아주 자유롭게 사용하기 때문에 바인딩없이 오류없이 하위 속성을 참조 할 수 있습니다.

if 바인딩으로 추가 된 DOM 요소에 이벤트 처리기 등을 등록하는 것이 하나의 원인입니다. 기본적으로 if 바인딩에 의해 추가 된 요소가 DOM에 추가 될 때 콜백을 가져와야합니다. 나는 livequery jquery 플러그인을 사용하여 시도했지만 요소가 두 번 추가되는 것처럼 보입니다. 이것을 보여주기 위해 몇 가지 예제 코드를 생각해 냈습니다.

녹아웃 문서 명확하게 상태 :

". 바인딩 경우, 그러나, 물리적으로 추가하거나 DOM에 포함 된 마크 업을 제거하고 표현식이 true 인 경우에만 후손에 바인딩을 적용" 다음 코드 그러나

http://knockoutjs.com/documentation/if-binding.html

는 인라인 스크립트에서 경고가 실행됩니다

JS :

이

var vm = { 
    val: ko.observable(false), 
    someText: ko.observable("some text"), 
}; 

ko.applyBindings(vm, document.getElementById("d1") 

HTML :

<div id="d1" data-bind="if: val"> 
    <span data-bind="text: someText"></span> 
    <script>alert("here")</script> 
</div>​ 

Answer 1

당신은 본질적으로 답했다을 이 따옴표로 자신의 질문 :

는 "경우에 결합하지만, 물리적으로 추가하거나 DOM에 포함 된 마크 업을 제거하고 표현에 해당하는 경우에만 후손에 바인딩을 적용합니다."

이 인용문은 바인딩의 동작을 명확하게 나타내지 만 다른 JavaScript 또는 브라우저 기능에 대해서는 언급하지 않습니다. Knockout의 도메인은 그 바인딩 뿐이므로 다른 말로는 완벽하지 않습니다. 녹아웃이로드 될 때까지 브라우저는 이미 해당 경고문을 실행했을 것입니다. Knockout이 DOM 트리에 다시 추가 할 때마다 alert-statement를 실행합니다.

Knockout과 결합하여 <script> 요소를 사용하는 것은 좋지 않은 행동이며 예기치 않은 동작을 초래할 수 있습니다. 당신이하고 싶은 것은 바인딩 인 Knockout의 영역에서 의도 된 행동을 표현하는 것입니다. 귀하의 경우, 이것은 afterRender 바인딩에 딱 맞는 : 다음 내부 <span>이 렌더링 true하고 afterRender 이벤트가 발생합니다

<div id="d1" data-bind="if: val"> 
    <span data-bind="text: someText, afterRender: alert('here')"></span> 
</div>​ 

val합니다. val가 false 경우

다음 내부 <span>는 이가 렌더링되지되고 afterRender 이벤트 것이다 하지 화재.

Answer 2

나는 내가해야 할 것을 알아 냈다.분명히 바인딩 바인딩 템플릿의 기본/단순 확장은 정말 '경우'

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

템플릿 바인딩 또한 전체 템플릿이 후 실행하는 함수를 전달할 수 afterRender 옵션이 DOM에 추가되었습니다.

내 코드는 이제 다음과 같습니다

<div data-bind="template: {if: val, afterRender: func}"> 

참고 :

이 또한 물론 'foreach는'바인딩 바인딩 '과'그리고를 사용하여 작동합니다.