녹아웃 구독이 작동하지 않습니다.

Question

드롭 다운 값이 변경되면 구독하려고했습니다. 나는 다음과 같은 논리를 가지고 있지만 작동시키지 못합니다.

HTML

  <div id="case-pin-@modelItem.CaseID" data-caseid="@modelItem.CaseID" class="row hidden popovercontainer pinBinding"> 
       <select data-bind="options:userPins, 
         value:selectedPin, 
         optionsCaption:'-- please select --', 
         optionsText: 'Name', 
         optionsValue: 'Id'"></select> 
      </div> 

JS 드롭의 값이 웹 사이트의 다른 부분에 의존 같이 userPins 배열은 서버에 AJAX 호출에 의해 채워

function UserPinViewModel(caseId) { 
    var self = this; 
    self.selectedPin = ko.observable(); 
    self.userPins = ko.observableArray([]); 
    self.caseId = caseId; 

    self.selectedPin.subscribe(function (newValue) { 
     console.log(newValue); 
     //addCaseToPin(newValue, self.caseId); 
    }); 
} 

var pinObjs = []; 

$(function() { 
    pinObjs = []; 

    $(".pinBinding").each(function() { 
     var caseId = this.getAttribute("data-caseid"); 
     var view = new UserPinViewModel(caseId); 
     pinObjs.push(view); 

     ko.cleanNode(this); 
     ko.applyBindings(view, this); 
    }); 
}) 

드롭 다운의 값을 변경할 수 있습니다. 여기서는 배열을 채우는 데 사용한 논리를 사용합니다.

function getPins() { 
    $.ajax({ 
     type: 'POST', 
     url: '/Home/GetPins', 
     success: function (data) { 
       for (var i = 0; i < pinObjs.length; i++) { 
        pinObjs[i].userPins(data); 
       } 
     }, 
     error: function (request, status, error) { 
      alert("Oooopppppsss! Something went wrong - " + error); 
     } 
    }); 
} 

내가 수동으로 드롭 다운을 변경하지만 때마다 서버에서 반환 된 것을 모든 변화가 일치하도록 드롭 다운의 실제 값은 구독 이벤트는 트리거되지 않습니다.

Answer 1

jQuery와 녹아웃을 모두 사용하여 DOM을 조작하는 것은 좋지 않습니다. 녹아웃의 전체적인 생각은 당신이 DOM을 조작하지 않는다는 것입니다. viewModel을 조작합니다.

cleanNode을 사용하면 잘못된 방식으로 작업하고 있음을 나타내는 코드 냄새이기도합니다. Knockout이 제공하는 도구를 사용하는 경우 Knockout이이를 처리합니다.

이 경우 사용자 지정 바인딩 처리기를 제안하려고했지만 실제로 원하는 것은 모두 UserPinViewModel 개체를 만들어 HTML의 .pinBinding 요소의 각 인스턴스에 적용한 것입니다. viewModel에 UserPinViewModel 생성자가있는 경우 with binding을 사용하여이 작업을 수행 할 수 있습니다.

function UserPinViewModel(caseId) { 
 
    var self = this; 
 
    self.selectedPin = ko.observable(); 
 
    self.userPins = ko.observableArray([]); 
 
    self.caseId = caseId; 
 

 
    self.selectedPin.subscribe(function(newValue) { 
 
    console.log(newValue); 
 
    //addCaseToPin(newValue, self.caseId); 
 
    }); 
 

 
    // Pretend Ajax call to set pins 
 
    setTimeout(() => { 
 
    self.userPins([{ 
 
     Name: 'option1', 
 
     Id: 1 
 
    }, { 
 
     Name: 'option2', 
 
     Id: 2 
 
    }, { 
 
     Name: 'option3', 
 
     Id: 3 
 
    }]) 
 
    }, 800); 
 

 
    // Later, the options change 
 
    setTimeout(() => { 
 
    self.userPins([{ 
 
     Name: 'animal1', 
 
     Id: 'Elephant' 
 
    }, { 
 
     Name: 'animal2', 
 
     Id: 'Pony' 
 
    }, { 
 
     Name: 'animal3', 
 
     Id: 'Donkey' 
 
    }]) 
 
    }, 4000); 
 

 
} 
 

 
ko.bindingHandlers.pin = { 
 
    init:() => null, 
 
    update:() => null 
 
}; 
 

 
ko.applyBindings({ 
 
    pinVm: UserPinViewModel 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div id="case-pin-@modelItem.CaseID" data-bind="with: new pinVm('someCaseId')" class="row hidden popovercontainer pinBinding"> 
 
    <select data-bind="options:userPins, 
 
        value:selectedPin, 
 
        optionsCaption:'-- please select --', 
 
        optionsText: 'Name', 
 
        optionsValue: 'Id'"></select> 
 
</div>

는

내 getPins 함수 .pinBinding 요소가 수신되는 데이터에 대응한다는 것을 의미한다. 이 경우 pinObjs이 실제로 viewModel의 일부 여야하며 요소는 하드 코딩되지 않고 데이터 (예 : foreach)로 생성되어야합니다. 나는 그것이 내가 생각하는 것과 어떻게 작동하는지 모르겠다. 서버 측은 @modelItem.CaseID이다.