Knockout.js 뷰 모델은 변경되었지만 게시 된 사이트에서는 확인 표시가 변경되지 않습니다.

Question

Knockout.js를 사용하여 인터페이스 처리를하는 Razor 페이지로 작업하고 있습니다. 뷰 모델이 값을 변경하고 저장시 데이터베이스가 값을 올바르게 저장하는 동안 클릭하면 체크 표시가 변경되지 않습니다.

나는 비슷한 질문을 연구했으며 this answer을 찾았습니다. 불행히도 Knockout click 이벤트를 true로 설정하면 Visual Studio에서 실행하는 동안 체크 표시가 시각적으로 변경 될 수 있지만 게시 된 개발 사이트에서는 표시가 변경되지 않습니다.

체크 박스

는 다음과 같이 면도기에 정의되어 있습니다

체크 박스가 knockout.js에 해당

<div class="col-md-3"> 
    <label class="checkbox-inline" for="NeedsFurtherReview"> 
     <input id="NeedsFurtherReview" type="checkbox" data-bind="checked: $parent.NeedsFurtherReview, visible: !$parent.HasBeenProcessed(), click: $parent.MarkCheckToggled()" /> Further Review Needed 
    </label> 
</div> 
<div class="col-md-3"> 
    <label class="checkbox-inline" for="PendingFinalization" data-bind="visible: !$parent.HasBeenProcessed()"> 
     <input id="PendingFinalization" type="checkbox" data-bind="checked: $parent.PendingFinalization, enable: $parent.CanBeProcessed(), visible: !$parent.HasBeenProcessed(), click: $parent.MarkCheckToggled()" /> Ready for Final Processing 
    </label> 
</div> 

가 모델로보기

Self.PendingFinalization = ko.observable(pendingFinalization); 

Self.CheckToggled = ko.observable(false); 

Self.MarkCheckToggled = function() { 
    Self.CheckToggled(true); 
    return true; 
}; 

이것에 대해 괴짜 그것에서 잘 작동한다는 것입니다

IE. MarkCheckToggled에서 리턴이 없었고 click 이벤트에서 $ parent.MarkCheckToggled로 호출되었을 때 실제로 실제로 IE에서 정상적으로 작동했습니다. 사실 IE는 이제 상자를 클릭 할 때 Visual Studio에서 예외를 throw하지만 작동하지 못하게하거나 게시 된 사이트에서이 오류를 시각적으로 던지지 않습니다.

Unhandled exception at line 4190, column 25 in http://localhost:26021/Scripts/knockout-3.4.0.debug.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'apply'

미리 조언 해 주셔서 감사합니다. 자세한 내용을 알려 드리겠습니다. Stack Overflow에 관한 첫 번째 질문입니다.이 질문이 가능한 한 최선의 방법으로 제시되지 않는다면 미리 사과드립니다.

Answer 1

먼저 클라이언트 측 기술인 knockout은 배포 위치를 신경 쓰지 않습니다. 로컬에서 실행 중이고 배포 할 때 차이가 나는 경우 차이점은 클라이언트 또는 클라이언트 측 자산이 제공되는 방식입니다.

반환하지 않고 IE에서 정상적으로 작동하는 한, IE의 버전에 따라 달라집니다.

오류까지 : 클릭 바인딩은 함수 참조를 기대하므로 해당 부분을 click: $parent.MarkCheckToggled으로 변경해야합니다.

그러나 녹아웃에서 모델에 바인딩하는 방법을 사용하는 것이 더 이해하기 쉬운 방법이라고 생각합니다. UI 이벤트에 응답하는 대신 모델 변경 사항에 응답 할 수 있습니다. 이 경우 subscribe을 NeedsFurtherReview 및 PendingFinalization 관측 값으로 변경하고 MarkCheckToggled 함수를 응답으로 실행합니다.

Answer 2

click 바인딩은 함수 참조를 필요로합니다. 따라서 click: $parent.MarkCheckToggled이 바람직하고 click: $parent.MarkCheckToggled()이 아닐 수도 있습니다.

그렇지 않으면 연결된 처리기의 응답이 올바른 것인데 이는 클릭 처리기에서 return true입니다.

더 나은 방법은 click 대신 change : change: $parent.MarkCheckToggled 대신 연결할 수 있습니다.