0

私のMVCレイザービューはこのマークアップをレンダリングします：

function existingNamingsViewModel() {
            var self = this;
            var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));
            self.ExistingNamings = ko.observableArray(initialData);
        }
        ko.applyBindings(new existingNamingsViewModel(), document.getElementById("namings-control"));

initialData変数が次のように初期化された、正しいJSシリアル化コードに。

var initialData = [{"TypeName":"Orders","NameBlocks":["{intInc_G}","/","{intInc_D}","/02/-","{yy}"],"ParamBlocks":["2296","","1","",""]}];

koバインディングが適用された後、結果のhtmlは、編集可能なグリッドの形式になります。 ここに画像の説明を入力してください

ユーザーがこれらの入力フィールドのデータを変更するたびにビューモデルを自動的に更新できるようにするには、knockoutJSが必要です。ただし、ビューモデルは単純なJSONオブジェクトから初期化されたため、ではNameBlocksありParamBlocksませんko.observableArray。私は彼らがいる必要があります。どうすればこれを達成できますか？

NamePS 1つのアイデアは、かみそりが/ParamBlocks配列のみをシリアル化し、ExistingNamings配列がjavascriptコードを介して手動で入力され、にName/ParamBlocksラップされたカスタムのネーミングクラスオブジェクトを作成する、より複雑な初期化を行うことko.observableArrayです。しかし、これが唯一の方法ですか？

4

1 に答える 1

1

データの配信方法を変更する必要があるかもしれませんが、あなたのためにトリックを行うはずのマッピングプラグインが利用可能です。

マッピングプラグインは、JSONオブジェクトをビューモデルにマッピングする関数を提供します。

var viewModel = ko.mapping.fromJS(data);

ただし、ドキュメント（上記にリンクされている）では、JSONオブジェクト内のすべてのプロパティに名前が付けられていることに注意してください。

例で提供したinitialDataものには、名前付きの値のコレクションではなく、単に値のコレクションである配列が含まれています。

また、initialData単一のオブジェクトを含む配列です。このシナリオで常に単一のオブジェクトが必要な場合は、このソリューションの方が簡単です。

initialData次の形式で配信できるとしましょう。

var initialData = {
    "TypeName":"Orders",
    "NameBlocks": [
        {"block":"{intInc_G}"},
        {"block":"/"},
        {"block":"{intInc_D}"},
        {"block":"/02/-"},
        {"block":"{yy}"}
    ],
    "ParamBlocks":[
        {"block":"2296"},
        {"block":""},
        {"block":"1"},
        {"block":""},
        {"block":""}
    ]
};

次に、ビューモデルの作成は次のように簡単になります。

var viewModel = ko.mapping.fromJS(initialData);

$(function() {
   ko.applyBindings(viewModel); 
});

これが私が設定したフィドルで、これが実際に動作しているのを見ることができます：http: //jsfiddle.net/jimmym715/qUjLQ/

うまくいけば、ソリューションは、いくつかのデータ形式の変更とマッピングプラグインの使用と同じくらい簡単になります。

とにかく、マッピングプラグインは正しい方向にあなたを送るはずです。

于 2012-07-28T20:54:04.150 に答える