knockoutjs를 사용하여 그리드와 바인딩 날짜 발행

Question

편집 가능한 그리드와 그리드에 데이터를 추가하는 폼이 있습니다. 사용자는 그리드 데이터를 직접 편집 할 수 있으며 양식 섹션을 사용하여 새 항목을 입력 할 수 있습니다. ASP.Net MVC와 함께 Ajax 형식과 결합하여이 작업을 수행했습니다. 나는 성공적인 아약스 postback시 전체 grid html을 업데이트했다. 복잡한 것은 아니지만 전통적인 구현입니다.

이제 저는 knockoutjs로이를 향상시키기 위해 노력했습니다. 아이디어는 UI를 지속하지만 백엔드에서 모든 작업을 수행하여 경험이 최소한의 깜박임과 트래픽 감소/포스트 백 시간이 더 나은 환경을 제공하도록하는 것입니다. 예상대로 모든 것이 백엔드로 진행됩니다. 요약은 다음과 같습니다 -

저는 'commentToAdd'객체와 'commentList'객체로 구성된 viewModel을 주석 객체의 목록으로 예상했습니다. 나는 'commentList'객체를 그리드와 바인딩하고 'commentToAdd'는 폼과 바인딩합니다.

var viewModel = new commentsModel();   
$.getJSON('@Url.Action("CommentsKOVM", "Claim", new { ClaimGUID = commentObj.ClaimGUID })', 
function(data) { //upon success 
    viewModel.commentToAdd = ko.mapping.fromJS(data.CommentToAdd); 
    viewModel.allComments = ko.mapping.fromJS(data.AllComments, mapping);// Initial items   
    ko.applyBindings(viewModel); 

잘 작동합니다. 하지만 '날짜'필드가 있습니다. JSON은 '/ 일 (1224043200000)'로 렌더링 그래서, 나는 그것을 포맷을했습니다 - How do I format a Microsoft JSON date? 같은 :

<span data-bind="text:new Date(parseInt(PostedOn.toString().substr(6))).toLocaleFormat('%d/%m/%Y')"></span> 

그러나이 작동하지 않습니다 'PostedOn'는 관찰로 변환되는 것 때문에! .toString 함수 정의를 반환합니다!

나는 또한 Hanselman article에 설명 된 날짜 바인딩을 구현하려고 시도했습니다.

그리드에 내 날짜가 올바르게 표시되지 않습니다. 또한 '매핑 무시'을 시도 :

var mapping = {'ignore': ["PostedOn"]}; 

을하지만 내 자식 객체 (즉 commentList.PostedOn)에 대한 작동하게하는 방법을 모르겠어요.

pls가 내 눈금에 정확한 날짜를 알 수 있도록 적절한 방식으로하지 않을 수도 있습니다.

PS : ko.observableArray (data.commentList)를 사용할 때 예상대로 작동하지만 편집 기능과 잘 어울리지 않습니다.

Answer 1

는 KO.mapping.fromJS이 일을 한 것으로 밝혀졌다 말을, 그것은 (내 data.allComments 변환 주석 배열)을 "observables 배열"로 변환합니다. 나는 내부적으로 그것이 각각의 속성을 관찰 가능한 것으로 바꾸 었다고 믿습니다. 내가

PostedOn: <input type="text" data-bind="date: PostedOn" /> 

로 날짜 필드를 액세스 할 때

그래서, 날짜에 대한 사용자 정의 바인더 대신 값의가 관찰 할 수있어 - 다음과 같이

ko.bindingHandlers.date = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var jsonDate = valueAccessor(); 

를 디버깅 후, 업데이트 빙고, 예상대로 작동했습니다!

PostedOn: <input type="text" data-bind="date: PostedOn()" /> 

나는 KO에 관한 나의 오해 였다고 동의합니다. 그러나 아직도 조금 명확하지 않습니다. ko.mapping.fromJS와 ko.Observable 사이의 차이점에 대해에 대해 더 중요한 것은 언제 사용합니까?

Answer 2

여기이 질문은 좋은 예를 많이 있습니다

Handling dates with Asp.Net MVC and KnockoutJS

나는 개인적으로 같은 사용자 지정 바인딩을 사용하는 것이 좋습니다 것입니다 : 당신이 jQuery를 UI와 날짜 선택기가있는 경우입니다

var jsDateFormat = "%d/%m/%Y"; // can be something like yy-mm-dd 

//... 

ko.bindingHandlers.date = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor(); 
     if (value != null) { 
      var jsonDate = new Date(parseInt(valueAccessor().substr(6))); 
      element.innerHTML = jQuery.datepicker.formatDate(jsDateFormat, jsonDate); 
     } 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
    } 
}; 

, 그렇지 않은 경우 변경하면됩니다.

jQuery.datepicker.formatDate(jsDateFormat, jsonDate) to parseInt(jsonDate.substr(6))).toLocaleFormat(jsDateFormat)

대신 다음

그리고 :

<span data-bind="text:new Date(parseInt(PostedOn.toString().substr(6))).toLocaleFormat('%d/%m/%Y')"></span> 

사용 : 지금 얼마나 깨끗한

봐!:)

당신은 커스텀 knockout.js 워드 프로세서 바인딩에 대한 자세한 읽을 수 있습니다 : http://knockoutjs.com/documentation/custom-bindings.html