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

标签 knockout.js asp.net-mvc-4

我在谷歌上搜索了如何将 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。

    关于knockout.js - 将 Mvc 模型传递给 KnockoutJS 的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11628938/

    相关文章:

    javascript - Knockout.js 动态链接点击不通过

    jquery - 如何在外部 javascript 文件中从 @Html.TextBoxFor 检索值

    javascript - JQuery DataTables 无法识别加载的数据

    javascript - viewModel.errors不是函数, knockout 验证

    c# - 代码先创建表

    c# - 如何将 reCAPTCHA 验证失败添加到 @html.ValidationSummary 列表中

    c# - Razor 2 到 Razor 3 MVC 5

    javascript - KO Component - 在组件绑定(bind)中保留 DOM 元素

    c# - 使用 Knockoutjs 显示点击的项目

    javascript - 从嵌套数据结构中删除元素