将Mvc Model传递给KnockoutJS的最佳实践

Question

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

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

哪种方式是将mvc模型传递给knockoutjs的最佳方法？我知道这是一个每个需求的基础,但似乎使用$ .get比@ Html.Raw方法更清晰.

Answer 1

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

在强类型Razor视图中,您可以像编写任何其他HTML一样编写JavaScript ViewModel对象,随时插入Model元素.我发现这个笨拙,因为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,您需要在客户端做更多的事情.

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

Answer 2

当您希望将数据作为实际页面下载的一部分发送时,使用@ Html.Raw(Json.Encode(Model)).这可能会导致您的页面需要更长时间才能呈现给用户,但是当它呈现时,它应该已经准备好了.

$ .get或$ .ajax将在页面呈现时获取数据.这会创建一个单独的调用,这将导致页面在呈现后更新.

至于使用哪个..这取决于您的页面布局方式,是否必须包含所有数据,以及获取数据与呈现页面所需的时间.

Answer 3

我的方法:

• 视图模型是用自己的JS文件编写的,没有服务器端代码生成
• 视图模型通过$ .get或$ .ajax加载数据
• 视图在创建视图模型时传入对象,并且此对象包含所有服务器端生成的URL

一个例子:

function MyViewModel(urls) {
    var self = this;
    self.isLoading = ko.observable(true);
    self.items = ko.observableArray();
    self.loadData = function() {
        $.get(urls.load, function(data) {
                // Process data and push into our items array
                self.isLoading(false);
            });
    }
}

var vm = new MyViewModel({
        load: '@Url.Action("GetData", "MyItemController")'
    });

$(function() {
    ko.applyBindings(vm);
    viewModel.loadData();
});

这意味着我对数据进行了额外的AJAX调用,但IMO用户开始意识到数据!= UI.好处是我的UI可以快速提供,因为不涉及真正的数据访问.数据加载可能需要一些时间,具体取决于数据库,数据量等等.它还为我的代码提供了非常清晰的关注点分离.

Answer 4

正如您所说，这几乎是每个需求的基础。

如果您正在执行“单页应用程序”，您将执行大量 $.get 和 $.ajax 调用，如果您只是渲染单个页面，则将模型放入Html，节省了对服务器的额外请求。

还取决于您想要服务器端的代码量，如果我的应用程序需要 API，我倾向于重用 API 并执行 $.get 和 $.ajax 调用，如果不需要，我会将模型放在 Html 中。