Knockout JS、MVC 3 和以 JSON 格式查看模型服务器端数据答案

【问题标题】：Knockout JS, MVC 3 and View Model Server Side Data as JSONKnockout JS、MVC 3 和以 JSON 格式查看模型服务器端数据
【发布时间】：2012-08-02 14:36:12
【问题描述】：

所以我有一个问题...我在我的网络应用程序中分离关注点：剃须刀页面中的 HTML 和 js 文件中的 JS。我的问题在于我想使用来自服务器的视图模型中传递的控制器中的数据作为选择列表的选项。问题在于我将 js 与 HTML 分开，无法访问 js 文件中的 Razor。

我的视图模型中有一个项目列表...

public List Stuffs { get; set; }

我在服务器端对它进行 json 编码，并确保注意循环引用，所以它看起来像这样 [{"id":1,"name":"blah"},{"id":2,"name":"blah2"},{"id":3,"name":"blah3"},{"id":4,"name":"blah4"}]

问题是，我想保持关注点分离，那么如何将该数组放入我的 js 文件中，以便可以使用敲除将其绑定到选择列表？我绝对不想再次往返服务器。

【问题讨论】：

How to enable data binding in KnockoutJS using the ASP.NET MVC 3 "Razor" View Engine? 的可能重复项
@ErikPhilips 我认为这只是他的问题的一半。他想要某种方式让 javascript 与 Razor 保持分离。该答案仅使用 Razor。
@Tyrsius 好吧，只有三个可能的答案，将 Javascript 嵌入 Razor 视图中，并在加载时将其连接起来（如我链接的答案与您在此问题上的答案相同）或AJAX 页面加载后的请求，或者有一个控制器返回模型作为 JS 文件包含（可怕，还不如 #2 ）。
@ErikPhilips 您链接的答案与我的答案不同。它没有显示如何将 javascript 对 Razor 生成的 JSON 的使用保存在单独的文件中。 这是一个重要的区别。
@Tyrsius 啊是的，我明白了，你是对的。对我来说，从我提供的答案到你的答案的过渡是如此基本，我看了一遍。

标签： asp.net-mvc-3 razor knockout.js

【解决方案1】：

假设你有一些看起来像这样的视图：

<div> (Some stuff) </div>

<script type="text/javascript">
    var initialData = //Your JSON
<script>

然后在您的 javascript（您已在视图下方链接，以便它在其后加载）中，您有如下内容：

var data = initialData || {} //Or some other default value, in case initialData wasn't set

如果已设置，这将加载到 initialData 中，如果未设置，则不使用任何内容（或您定义的默认值）。松散耦合。

当然，更复杂的数据需要您对结构进行标准化，但这本质上是一种允许您从 razor 生成的视图中提取数据而无需将其紧密耦合到您的 javascript 文件的方法。

【讨论】：

【解决方案2】：

您的 Javascript 文件是否包含可实例化函数形式的视图模型，例如类似：

function MasterVM(data)

或对象字面量，例如

var masterVM = { ...

？我倾向于使用可实例化的视图模型（部分原因是它们使用映射插件通过视图模型的层次结构向下链接——顶层构建它的子视图），在这种情况下，我认为 Razor 视图实例化视图很好具有从 MVC 视图模型呈现的 JSON 的模型，例如：

var masterVM = new MasterVM(@(Html.Raw(JsonConvert.SerializeObject(Model.ProductViewModel))));

或者甚至让 Knockout 视图模型由一个显示模块“拥有”并像这样初始化它：

productModule.init(@(Html.Raw(JsonConvert.SerializeObject(Model.ProductViewModel))));

然后 productModule 还负责其他事情，例如在您的视图模型和服务器之间进行调解、监视脏状态等。

此外，如果您要采购大量可重用的选项，并希望浏览器缓存这些选项，那么再次往返于服务器并不一定是坏事。如果你是，你可能想要一个 MVC 控制器，它发出一个包含所有常用选项的大对象文字，然后你可以将其用作跨多个选择的“选项”属性。但是，如果您的选项特定于特定的视图模型，那么我想它们必须是您的视图模型的一部分。

【讨论】：

谢谢汤姆...这正是我昨晚所做的！