1

編集可能なグリッドと、グリッドにデータを追加するためのフォームがあります。ユーザーはグリッドデータを直接編集でき、フォームセクションを使用して新しいエントリを入力できます。これは、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）を使用すると期待どおりに機能しますが、編集機能ではうまくいきません。

4

2 に答える 2

1

ここでのこの質問には、多くの良い例があります。

Asp.NetMVCおよびKnockoutJSを使用した日付の処理

個人的には、カスタムバインディングを使用することをお勧めします。

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 UIとdatepickerがある場合であり、そうでない場合は、次のように変更するだけです。

jQuery.datepicker.formatDate(jsDateFormat, jsonDate)あなたに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

于 2013-01-02T09:13:24.037 に答える
0

最後に、KO.mapping.fromJSがその役割を果たしていることが判明し、私のdata.allComments（コメントの配列）を「オブザーバブルの配列」に変換しました。内部的には、それぞれのプロパティをオブザーバブルに変換したと思います。

だから、私が日付フィールドにアクセスしたとき

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の違い、さらに重要なのはどちらをいつ使用するかについては、まだ少しわかりません。

于 2013-01-03T16:45:55.273 に答える