ko.applyBindings를 호출하여 부분 뷰를 바인딩 할 수 있습니까?


257

KnockoutJS를 사용하고 있으며 기본보기 및보기 모델이 있습니다. 별도의 자식 뷰 모델을 바인딩 할 다른 뷰가있는 대화 상자 (jQuery UI 하나)를 원합니다.

대화 상자 내용의 HTML은 AJAX를 사용하여 검색되므로 ko.applyBindings요청이 완료되면 호출 할 수 있기를 원하며 하위보기 모델을 대화 상자 div 내부의 ajax를 통해로드 된 HTML 부분에만 바인딩하려고합니다.

실제로 가능합니까, 아니면 페이지가 처음로드 된 다음 ko.applyBindings한 번 호출 될 때 모든 뷰와 뷰 모델을로드해야 합니까?

답변:


430

ko.applyBindings 루트로 사용할 DOM 요소 인 두 번째 매개 변수를 승인합니다.

이렇게하면 다음과 같은 작업을 수행 할 수 있습니다.

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

따라서이 기술을 사용하여 viewModel을 대화 상자에로드하는 동적 컨텐츠에 바인딩 할 수 있습니다. 전반적으로 applyBindings여러 이벤트 핸들러가 연결되므로 동일한 요소에서 여러 번 호출하지 않도록주의하고 싶습니다 .


17
도로의 어느 시점에서 바인딩을 제거 ko.cleanNode(document.getElementById("one")하려면 항목을 정리하거나 ko.removeNode(document.getElementById("one")정리하고 DOM에서 노드를 제거하기 위해 호출 할 수 있습니다 .
Michael Berkompas

7
그냥 메모 cleanNoderemoveNode이벤트 핸들러를 제거하지 않습니다, 그래서 몇 가지주의하십시오. 경우 에 따라 해당 영역 에서 template또는 with바인딩 을 사용하는 것이 좋으므로 새 요소가 렌더링됩니다.
RP Niemeyer

7
현재 KO에는 부족한 것입니다. 우리는 사람들이 섹션을 "리 바인드"하도록 특별히 의도하지 않습니다. 그러나 KO는 참조 된 경우 jQuery를 사용하여 이벤트를 첨부하므로 $(element).unbind();모든 핸들러를 제거 할 수 있습니다 .
RP Niemeyer

5
이 함수들 (applyBindings, cleanNode, removeNode)은 어디에 기록되어 있습니까? knockoutjs.com에서 함수 서명을 찾을 수 없습니다.
EricP

2
이것이 문서 내에서 쉽게 찾을 수 있다면 좋을 것입니다. 나는 그것에 대한 언급조차 보지 못했습니다.
트래비스 카우프먼

61

Niemeyer의 답변이 질문에 대한 더 정확한 답변이지만 다음을 수행 할 수도 있습니다.

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

즉, DOM 요소를 지정할 필요가 없으며 다음과 같이 여러 모델을 동일한 요소에 바인딩 할 수도 있습니다.

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>

4
"with"를 사용하여 페이지의 영역을 개별 모델에 할당 할 수도 있습니다
-data

3
@flamingpenguin : 네,하지만 with싸지 않습니다. 참조 : link
mhu

7

런타임에 사용자 지정 모델을 요소에 바인딩했습니다. 코드는 다음과 같습니다. http://jsfiddle.net/ZiglioNZ/tzD4T/457/

흥미로운 것은 데이터 바인딩 속성을 내가 정의하지 않은 요소에 적용한다는 것입니다.

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);

ko 2.3에서 문제가 발생하면 위의 코드는 글로벌 ko.applyBindings ()를 적용 할 때 호출되는 고객 핸들러에 있습니다. 이제 "같은 요소에 바인딩을 여러 번 적용 할 수 없습니다"라는 오류가 발생합니다. 여전히 오류가 발생하는 이유를 파악하려고합니다. 동일한 변수에 바인딩을 여러 번, 서로 다른 요소에 적용 할 수 없습니까?
ZiglioUK

다음은 작동하지 않는 ko 2.3 버전입니다. jsfiddle.net/ZiglioNZ/tzD4T/458
ZiglioUK

부분보기에 applyBinding을 호출하기 전에 ko.cleanNode ()에 대한 호출을 추가해도 도움이되지 않는 것 같습니다 : jsfiddle.net/ZiglioNZ/tzD4T/459
ZiglioUK

해결 : applyBindings를 호출 할 필요조차 없었습니다!
ZiglioUK

필자는 knockoutjs 소스 코드를 편집하고 함수가 "동일한 요소에 여러 번 바인딩을 적용 할 수 없습니다."라는 부분을 주석 처리했습니다. 이제는 모두 정상적으로 작동합니다 ...이 방법은 더티 솔루션이지만 라이브러리에 새로운 것이므로 내 문제에 여러 번 적용하지 않는 방법을 모르겠습니다.
Geomorillo

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.