将模型数据绑定到淘汰视图模型？答案

【问题标题】：Binding Model data to Knockout ViewModel?将模型数据绑定到淘汰视图模型？
【发布时间】：2012-05-24 19:43:18
【问题描述】：

是否可以将模型中的数据绑定到淘汰视图模型。举个例子：

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 Helpers：

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

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

【问题讨论】：

标签： asp.net-mvc-3 knockout.js

【解决方案1】：

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

return JSON(product)

这样你会在你的 javascript 成功函数上获得产品的 json 元素，你需要收集 json 元素

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

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

【讨论】：

但是我的操作需要返回一个视图，否则视图将如何从我的编辑操作中加载？只是为了以 JSON 格式加载我的模型，有额外的操作似乎很麻烦？
为什么使用两种方式来渲染视图？似乎如果您想要一种 javascript 方式来呈现视图，您应该完全使用 javascript 并摆脱 MVC 视图。反之亦然

【解决方案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 但仍然缺少服务器端验证的提及。

【讨论】：

【解决方案3】：

您可以将数据序列化到您的页面，然后使用来自服务器的值初始化淘汰视图模型。

ItemName = ko.observable(serializedModel.ItemName);

【讨论】：