Question

是否可以将模型中的数据绑定到挖空视图模型。下面是一个例子：

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" />
}

但是使用Knockout，我会创建一个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>

那么如何使用我的控制器返回的数据来填充它？

Answer 1

我对淘汰赛没有任何经验，但在我看来你不再希望从你的控制器返回一个视图怎么样

return JSON(product)

这样你就可以在javascript成功函数中获得产品的json元素，你需要收集json元素

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

然后从这里你可以调用地图绑定。

Answer 2

使用淘汰赛时，你有两种方法可以做到这一点。 1.在一个视图中加载文本框等。在第一次加载该视图时，在初始加载时将模型转换为JSON以供淘汰使用。

所有其他来电/来自JSON的电话。

您可以在自己的视图中使用： @Html.Raw(Json.Encode(yourModel))

在视图中加载文本框（即它们是您视图的一部分）在document.ready（）上触发你的ajax调用以从控制器获取数据，转换为JSON即return Json(yourModel, JsonRequestBehavior.AllowGet)并将这些结果粗略地绑定在上面

注意 - 这种方法的缺点是验证。如果您有所有客户端验证，那么这是正常的，因为data- *的属性将由MVC写入您的文本框等。如果您有任何服务器端验证，则此处没有“平滑”内置集成淘汰赛。

这里有一篇不错的文章： http://www.codeproject.com/Articles/305308/MVC-Techniques-with-JQuery-JSON-Knockout-and-Cshar 但仍缺乏服务器端验证提及。

Answer 3

您可以将数据序列化到您的页面，然后使用来自服务器的值初始化knockout viewmodel。

ItemName = ko.observable(serializedModel.ItemName);

将模型数据绑定到Knockout ViewModel？

3 个答案: