将 Mvc 模型传递给 KnockoutJS 的最佳实践 [英] Best practice on passing Mvc Model to KnockoutJS

问题描述

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

I googled around on how to pass mvc model to knockoutjs and it seems there are two ways:

• 使用@Html.Raw(Json.Encode(Model))
• 使用 $.get 或 $.ajax

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

Which of the ways is a best practice of passing mvc model to knockoutjs? I know it is a per requirement basis but it seems using $.get is more cleaner versus the @Html.Raw method.

推荐答案

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

I've successfully used several approaches.

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

In a strongly typed Razor view, you can write the JavaScript ViewModel object like you would any other HTML, inserting the Model elements as you go. I find this klunky as Razor and JS don't play well together with Visual Studio and Intellisense, but even with a bunch of red squigglies the resulting code works fine.

<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:

This code can get ugly in a hurry depending on the complexity of your Model. As you mentioned, you can also serialize the model object into JSON using Html.Raw(). If you go that route, you can use it to build your Knockout ViewModel using the KO Mapping library:

<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)，您需要在客户端做更多的事情.

This isn't as kludgy as the first option, but I feel like I'm giving up too much control this way. It means my KO ViewModel is pretty tightly coupled to the structure of my MVC ViewModel, which I may or may not want. Not to mention, for this to work my JavaScript needs to be in my cshtml page which I really don't like. Lastly, both of these approaches are purely server side. For more responsive web pages, like SPIs, you'll want to do more on the client side.

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

My preference is to use $.getJSON calls client side from the JavaScript itself. At that point, you can process the return data into your ViewModel, either hand rolling or using the mapping library. If you are calling back to actions in your MVC controller, just have the action return a JsonResult type (instead of an ActionResult). (You can also do similar stuff with ContentResult) If you can use the new MVC4 WebAPI, those controllers will return JSON by default.

这篇关于将 Mvc 模型传递给 KnockoutJS 的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！