KnockoutJS : 뷰 모델의 객체에서 Observable Object가 새로 고침되지 않습니다.

Question

viewmodel에서 observables에 의한 knockoutJS 데이터 바인딩에 문제가 있습니다. 내 viewmodel 개체의 개체에서 특정 관찰 가능 (개체) 속성에 액세스하려고하면 값이 업데이트되지 않는 것처럼 보입니다.

<li data-bind="attr: {id: 'option-' + modalData().modalid }, modal: {template: 'modal-template', modalid: modalData().modalid, title: modalData().title, options: {heading: modalData().title, trigger: 'click'}, customElement: $('.modal-dropdown') }"> 
    <a href="#">Open Modal</a> 
</li> 

모달 대화 상자를 올바르게 초기화하려면 구성에 옵션 속성을 제공해야합니다. 올바른 제목을 표시하려면 modalData() 제목에 액세스해야합니다. 하나를 연 후 다른 모달 대화 상자를 열려고 할 때 문제가 나타납니다 - 제목 바인딩이 options-property에서 올바르게 작동하지 않는 것 같습니다.

다른 모달을 클릭하면 id 속성의 바인딩이 올바르게 업데이트되지만 머리글에는 처음 클릭 된 모달 대화 상자의 값이 표시됩니다.

누구든지 내가 어떻게 해결할 수 있는지 또는 내가 잘못하고있는 것을 알고 있습니까? 나는 그것이 옵션 안에있는 객체 내부의 관측 가능 객체에 접근하고 있으며 어떻게 든 그것이 이상하게 만드는 사실과 관련이 있다고 추측 할 수 있습니까?

도움 주셔서 감사합니다.

Answer 1

모달은 MVVM paradigm에서 달성하기 까다로운 일입니다.

data-attribute 많은 모달 라이브러리가 제공하는 접근 방식은 매우 단순한 라이브러리 사용법으로 간주되어야합니다. 대부분의 경우, 문서의 "API"섹션으로 직접 넘어 가야합니다 (물론 유스 케이스가 DEAD로 단순하지 않은 한).

저는 "options"객체를 전달하는 Custom Binding에서이 작업을 수행하는 데 가장 많은 성공을 거두었습니다. 예를 들어

: 당신 같은 사용하는 것이

ko.bindingHandlers.modal = { 
    init: function(element, valueAccessor) { 
     var options = ko.unwrap(valueAccessor()) || {}; 

     function onClick(){ 
      TheModalLibrary.OpenModal(options); 
     }; 

     element.onclick = onClick; 
    } 
}; 

(심지어 "청소기"그것을하지 않습니다 보이는?) :

<li> 
    <a href="#" data-bind="modal: modalData">Open Modal</a> 
</li> 

커플 중요한 것들을 여기 주목.

1. modalData이 관찰 가능하거나 변경해야 할 것으로 예상되는 경우이 것이 모달에 반영되어야합니다. init을 update으로 변경하십시오. 종속성 (valueAccessor)이 변경되면 바인딩이 강제로 다시 제거됩니다.
2. 이것은 전적으로 모범적 인 예이며 더 많은 의사 코드로 보여야합니다. 사용중인 실제 모달 라이브러리를 제공하면 더 구체적인 코드 샘플을 제공해 드리겠습니다.
3. 기본 녹아웃 바인딩을 시작점으로 간주해야합니다. 일들이 원격으로 복잡해 지 자마자 녹아웃이 제공하는 도구를 확장해야합니다. A, Component's 및 Template's.

큰 문제는 모달과 같은 DOM 지향적 인 것들 또는 JavaScript 라이브러리와의 통합이 일반적으로 Custom Binding 응용 프로그램에 가장 적합하다는 것입니다. 사실 명시 적으로 "MVVM"이 아닌 것은 Custom Binding에 속합니다.