2

私は現在、アプリケーション内のすべてのデータ バインディングを処理するために、ノックアウト .js を正常に使用しています。ただし、ページの読み込みごとに、document.ready で次のような初期の非同期データ読み込みを行っています。

$(document).ready() {
  getData()
});

ただし、代わりに (ASP.NET MVC2 を使用して) データをフォームにロードし、データ バインド タグに基づいてデータをビュー モデルに逆ロードすることは可能ですか?

これはうまくいかないように感じます。不適切なことをしていないことを確認したいだけです。

4

2 に答える 2

3

「値」バインディングは、最初に要素の値をビューモデルの値に設定するため、いいえ。ただし、最初にコントロールの値からモデル値を設定する独自のハンドラーに「値」バインディングのコードを複製することもできます。ノックアウトのデバッグ バージョンをダウンロードし、 2182 行を探します。ko.bindingHandlers['value'] = {このバインディング ハンドラー宣言をコピーして、「値」を別のものに変更し、init の最後に valueUpdateHandler() の呼び出しを追加します。

ko.bindingHandlers['myvalue'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        // skipping code
        valueUpdateHandler(); // update model with control values
    },
    'update': function (element, valueAccessor) {
        // skipping code
    }
};

myvalue バインディングを使用すると、最初にバインドされたときにモデルがコントロール値で更新されます。

<input type="text" data-bind="myvalue: name"></input>

または、すべてのコードをコピーする代わりに元の値を呼び出して、init の後に valueUpdateHandler からコードを追加することもできます。

ko.bindingHandlers['myvalue'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        // call existing value init code
        ko.bindingHandlers['value'].init(element, valueAccessor, allBindingsAccessor);

        // valueUpdateHandler() code
        var modelValue = valueAccessor();
        var elementValue = ko.selectExtensions.readValue(element);
        ko.jsonExpressionRewriting.writeValueToProperty(modelValue, allBindingsAccessor, 'value', elementValue, /* checkIfDifferent: */ true);
    },
    'update': function (element, valueAccessor) {
        // call existing value update code
        ko.bindingHandlers['value'].update(element, valueAccessor);
    }
};

AJAX を使用したくない場合は、モデルを JSON (剃刀構文) としてシリアル化することで、いつでも値を JavaScript に取得できます。

<script type="text/javascript">
var model = @(new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)));
</script>
于 2012-06-04T20:27:02.910 に答える
1

これを達成するためのいくつかの異なる方法を備えた実用的な例がここにあります（私のものではありません）：

http://jsfiddle.net/rniemeyer/5Z2SC/

于 2012-06-12T09:31:31.467 に答える