2012-06-19 1 views
1

ASP.NET MVC에서 KnockoutJS를 사용하고 있으며 ko.mapping을 사용할 때 끊어진 바인딩에 문제가 있습니다. 필자는 ViewModel의 메소드에 엔터 키를 바인딩 할 텍스트 영역이 있습니다 (기본적으로 제출하려면 입력하십시오).KnockoutJS 매핑 플러그인을 사용할 때 깨진 바인딩

나는 바인딩 사용자 정의 다음과 같습니다

ko.bindingHandlers.enterKey = { 
     init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
      ko.utils.registerEventHandler(element, 'keydown', function(evt) { 
       if (evt.keyCode === 13) { 
        evt.preventDefault(); 
        evt.target.blur(); 
        valueAccessor().call(viewModel); 
       } 
      }); 
     } 
    }; 

내보기 코드는 보이는 같은 :

<div class="content-area" id="container" data-bind="with: channelContent"> 
     // other code, to show content from channelContent 
     <textarea rows="1" cols="1" data-bind="value: $root.message, enterKey: $root.onMessageEnterKey"></textarea> 
</div> 

) (A ko.observable로 channelContent을 작성하는 경우 :

self.channelContent = ko.observable(); 

다음과 같이 채 웁니다.

$.post('@Url.Action("Content", "Channel")', { channelId: channel.Id }, self.channelContent); 

모든 것이 제대로 작동하고 enter는 내 onMessageEnterKey 메서드를 제대로 호출합니다. 불행히도 channelContent에 관찰 할 수있는 중첩 된 속성이 있기 때문에 ko.mapping을 사용하려고합니다.

self.channelContent = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model.Channel))); 

및 업데이트 내용 :

내가 ko.mapping를 사용하는 경우

$.post('@Url.Action("Content", "Channel")', { channelId: channel.Id }, function(result) { 
    ko.mapping.fromJS(result, self.channelContent); // update the channel content 

}); 

그리고 다른 모든 바인딩이 (제대로 UI를 기본 모델을 변경 업데이트) 잘 작동하는 것 동안, enterKey 바인딩이 작동을 멈 춥니 다. 그것은 결코 발생하지 않습니다.

즉, channelContent를 간단한 ko.observable에서 ko.mapping로 초기화하면 enterKey가 손상됩니다.

답변

1

더 많은 코드 또는 jsfiddle없이 어두운 곳에서 촬영하면 알기가 어렵습니다.

3 인수 업데이트 방법을 사용하지 않으면 매핑 플러그인이 업데이트되지 않는 시나리오를 보았습니다.

시도해보십시오.

$.post('@Url.Action("Content", "Channel")', { channelId: channel.Id }, 
function(result) { 
    ko.mapping.fromJS(result, {}, self.channelContent); 
}); 

제쳐두고, 나는 바인딩을 피할 것입니다.

편집

사실, 여기에 jsfiddle이며 나를 위해 어느 방식으로 작동합니다. 상황에 따라 다른 것을 보여주기 위해 업데이트 할 수 있다면 도움이 될 것입니다. 이 도움이

http://jsfiddle.net/madcapnmckay/52aMw/4/

희망.

+0

두 번째 매개 변수에 매핑 호출에 의해 추가 된 __ko_mapping__ 속성이 포함되어 있지 않으면 매핑 매개 변수로 처리하고 객체를 업데이트하는 대신 객체를 반환하므로 그 이유는 세 가지 매개 변수 버전을 항상 사용하기 때문입니다. 기존 항목의 업데이트. –

+0

사과, 답을 잊어 버리지 않았습니다. jsfiddle 구현은 내가하고있는 것과 동일하므로 뭔가 다른 점이 있다고 생각합니다. 조금 더 조사해서 어떤 일이 벌어지고 있는지 이해할 수 있습니다. – mfanto