1

モデルからノックアウトビューモデルにデータをバインドすることは可能ですか? 例を次に示します。

public ActionResult Edit(int id)
{
    Product product = _db.Products.FirstOrDefault(x=>x.ItemId == id);
    return View(product);
}

次に、ビューでは、伝統的に次のようにします。

@model myApp.Models.Product

@using(Html.BeginForm())
{
    @Html.EditorFor(x=>x.ItemName)
    @Html.ValidationMessageFor(x=>x.ItemName)

    <input type="submit" value="Update" />
}

しかし、ノックアウトでは、次のEditProductViewModelようなことをする場所から作成します。

var EditProductViewModel = {
    ItemName = ko.observable('')
};

EditProductViewModel.Edit = function() {
    $.ajax({
        url: "Home/Edit",
        data: ko.ToJson(this),
        success: function() {
            // do something
        }
    });  
};

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

そして、Html ヘルパーを使用する代わりに、私の見解では次のようにします。

<form data-bind="submit: Edit">
    <input type="text" data-bind="value: ItemName" />
    <input type="submit" value="Update" />
</form>

では、コントローラーから返されたデータをどのように入力すればよいでしょうか?

4

3 に答える 3

1

ノックアウトを使用する場合、これを行うには2つの方法があります。1.テキストボックスなどを1つのビューにロードします。そのビューを初めてロードするときに、ノックアウトで使用するために初期ロード時にモデルをJSONに変換します。

JSONを介した/からのすべての追加呼び出し。

ビューで使用できます: @Html.Raw(Json.Encode(yourModel))

  1. ビューにテキストボックスをロードします(つまり、ビューの一部です)document.ready()でトリガーし、コントローラーからデータを取得するためにajax呼び出しを呼び出し、JSONに変換します。つまりreturn Json(yourModel, JsonRequestBehavior.AllowGet)、上記で行ったように、これらの結果を大まかにバインドします。

注-このアプローチの欠点は検証にあります。すべてのクライアント側の検証がある場合は、データの属性としてこれで問題ありません-* MVCによってテキストボックスなどに書き出されます。サーバー側の検証がある場合、ここに「スムーズ」な統合は組み込まれていません。ノックアウト付き。

ここにまともな記事があります:http: //www.codeproject.com/Articles/305308/MVC-Techniques-with-JQuery-JSON-Knockout-and-Cshar ですが、サーバー側の検証についてはまだ言及されていません。

于 2012-05-24T20:35:23.583 に答える
1

ノックアウトの経験はありませんが、コントローラーからビューを返したくないようです。

return JSON(product)

そうすれば、json要素を収集する必要があるJavaScriptの成功関数で製品のjson要素を取得できます

$.ajax({
    url: "Home/Edit",
    data: ko.ToJson(this),
    success: function(data) {
        // map to knockout view model
    }
});

そして、ここからマップ バインディングを呼び出します。

于 2012-05-24T20:01:15.477 に答える
0

データをページにシリアル化し、ノックアウト ビューモデルをサーバーからの値で初期化できます。

ItemName = ko.observable(serializedModel.ItemName);
于 2012-10-05T09:00:43.073 に答える