Skip to main content
 首页 » 编程设计

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

2024年11月24日39EasonJim

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

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

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

    请您参考如下方法:

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

    在强类型 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。