knockout.js - 将 Mvc 模型传递给 KnockoutJS 的最佳实践

Question

我在谷歌上搜索了如何将 mvc 模型传递给knockoutjs，似乎有两种方法:

使用@Html.Raw(Json.Encode(Model))

使用 $.get 或 $.ajax

哪种方式是将mvc模型传递给knockoutjs的最佳实践？我知道这是基于每个需求的，但似乎使用 $.get 比使用 @Html.Raw 方法更干净。

Answer 1

我已经成功地使用了几种方法。

在强类型 Razor View 中，您可以像编写任何其他 HTML 一样编写 JavaScript ViewModel 对象，随时插入模型元素。我觉得这很笨拙，因为 Razor 和 JS 与 Visual Studio 和 Intellisense 不能很好地协同工作，但即使有一堆红色波浪线，生成的代码也能正常工作。

<script type="text/javascript">

var data = [
    @for (int i=0; i < Model.Packages.Count; i++)
    {
        var package = Model.Packages[i];
        <text>{Id: ko.observable(package.Id),
               Name: ko.observable(package.Name)
              }</text>
    }

    var viewModel = {
        var packages = ko.observableArray(data);
        // more code
    }

    ko.applyBindings(viewModel);
</script>

根据模型的复杂性，这段代码可能会很快变得丑陋。正如您所提到的，您还可以使用 Html.Raw() 将模型对象序列化为 JSON。如果你走那条路，你可以使用它来使用 KO Mapping 库构建你的 Knockout ViewModel:

<script type="text/javascript">
    var data = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
    var viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
</script>

这不像第一个选项那样笨拙，但我觉得这样我放弃了太多的控制权。这意味着我的 KO ViewModel 与我的 MVC ViewModel 的结构非常紧密地耦合，我可能想要也可能不想要。更不用说，要使这个工作正常，我的 JavaScript 需要在我真的不喜欢的 cshtml 页面中。最后，这两种方法都是纯粹的服务器端。对于响应速度更快的网页，例如 SPI，您需要在客户端做更多的事情。

我的偏好是使用 $.getJSON 从 JavaScript 本身调用客户端。此时，您可以将返回数据处理到您的 ViewModel 中，无论是手动滚动还是使用映射库。如果您要回调 MVC Controller 中的操作，只需让操作返回 JsonResult 类型(而不是 ActionResult)。 (你也可以用 ContentResult 做类似的事情)如果你可以使用新的 MVC4 WebAPI，这些 Controller 将默认返回 JSON。