編集可能なグリッドと、グリッドにデータを追加するためのフォームがあります。ユーザーはグリッドデータを直接編集でき、フォームセクションを使用して新しいエントリを入力できます。これは、ASP.NetMVCとajaxフォームを組み合わせて正常に機能しました。ajaxのポストバックが成功したら、グリッド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はそれを'/Date(1224043200000)'としてレンダリングします。それで、フォーマットする必要があります-Microsoft JSON日付をフォーマットするにはどうすればよいですか?お気に入り:
<span data-bind="text:new Date(parseInt(PostedOn.toString().substr(6))).toLocaleFormat('%d/%m/%Y')"></span>
しかし、「PostedOn」がオブザーバブルに変換されているように見えるため、機能しません。.toStringは関数定義を返します!
また、 Hanselmanの記事で説明されているように、日付バインディングを実装しようとしました。
グリッドに日付が正しく表示されないようです。私も'マッピングを無視しようとしました':
var mapping = {'ignore': ["PostedOn"]};
しかし、それを私の子オブジェクト(つまり、commentList.PostedOn)で機能させる方法がわかりません。
私はそれを正しい方法で行っていない可能性があるので、plsは私のグリッドで正しい日付を取得することを提案または少なくとも助けてくれます。
PS:ko.observableArray(data.commentList)を使用すると期待どおりに機能しますが、編集機能ではうまくいきません。