由于视图模型为空，将剔除应用于填充的表单而不擦除表单的数据？答案

【问题标题】：Applying knockout to a filled form without wiping the form's data because of an empty viewmodel?由于视图模型为空，将剔除应用于填充的表单而不擦除表单的数据？
【发布时间】：2011-07-03 12:02:18
【问题描述】：

我有一个脚本，它通过将空视图模型应用于我的表单来初始化淘汰赛。

当用户在表单中输入数据时，视图模型会相应更新 - 这是预期的行为。

JavaScript

var viewModel = {
  myField : ko.observable(),
  init : function (somedata) {
    ...
    ko.applyBindings(this, container);
  },
  ...more stuff...
}

部分

<%:Html.TextBoxFor(x => x.MyField, new Dictionary<string, object> { { "data-bind", "value: myField, valueUpdate: 'keyup'" } })%>

当我调用我的 javascript 以在现有表单中应用敲除时，MyField（然后在我的输入字段中）中已经存在的值会被我的敲除视图模型中的空数据擦除（该视图模型是我驻留的 javascript 的一部分在另一个文件中）。

当页面被加载时，MVC 确保MyField 输入元素被先前从MyField 输入的数据填充。当调用 init 时，该字段将被视图模型中的值覆盖 myField 为空，因为它是一个静态 JavaScript 文件。

我该如何解决这个问题？

【问题讨论】：

只是一个想法，但是在你申请 KO 之前你不能从表单上的字段构建一个 viewModel 吗？那不是你的 viewModel 吗？
@epitka: 是的，但是当我可以使用 Html 帮助器构建初始输入元素时，asp.net mvc 为我节省了很多工作 - 不使用 Html 帮助器将是一个选项并且做到 100% 淘汰赛风格...

标签： c# asp.net-mvc knockout.js

【解决方案1】：

我尝试了两种方法来处理这样的事情：

1- 如果您对服务器端有很好的控制（看起来确实如此），那么您可以考虑在您的视图中输出 javascript，将 observables 设置为正确的值。

有点类似于：http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/。至少这部分：

<script type="text/javascript"> 
    var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>; 
</script>

您可以这样做并在调用 applyBindings 之前集成 initialData，或者可能只是发出直接将您的 observable 设置为正确值的 javascript。

2- 如果您对服务器端没有很好的控制（第 3 方控制或只是您目前无法/不愿意更改的东西），那么您可以考虑在页面之后初始化您的 viewModel加载，但在调用 applyBindings 之前。您将找到您感兴趣的元素，从中读取元数据或值，并在让绑定完成工作之前设置您的可观察对象。

也许对您来说一个复杂的问题是，目前您的所有 javascript 都在一个单独的文件中。

【讨论】：

这似乎是最好的解决方案，我只是不明白为什么 KO 在初始化时没有 2 路数据绑定。初始化 KO 后，输入字段中的数据将被写回视图模型（正如数据绑定中所预期的那样）

【解决方案2】：

我不确定，但我认为 ko.observable 需要一个参数。

【讨论】：