knockout.js 将表单加载到 viewModel答案

【问题标题】：knockout.js load form into viewModelknockout.js 将表单加载到 viewModel
【发布时间】：2012-06-08 20:24:22
【问题描述】：

我目前正在成功地使用 knockout.js 来处理我的应用程序中的所有数据绑定。但是，在每次页面加载时，在我的 document.ready 中，我都在进行初始异步数据加载，如下所示：

$(document).ready() {
  getData()
});

但是，是否可以改为将数据加载到表单中（使用 ASP.NET MVC2），然后根据数据绑定标签将数据反向加载到视图模型中？

我觉得这行不通，我只是想确认我没有做任何不当的事情。

【问题讨论】：

标签： asp.net-mvc-2 data-binding knockout.js

【解决方案1】：

“值”绑定最初将元素的值设置为视图模型中的值，所以不是。但是，您可能会将“值”绑定的代码复制到您自己的处理程序中，该处理程序最初会根据控件上的值设置模型值。下载 knout 的 debug version，并在第 2182 行查找 ko.bindingHandlers['value'] = {。复制此绑定处理程序声明并将 'value' 更改为其他内容，然后在 init 末尾添加对 valueUpdateHandler() 的调用：

ko.bindingHandlers['myvalue'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        // skipping code
        valueUpdateHandler(); // update model with control values
    },
    'update': function (element, valueAccessor) {
        // skipping code
    }
};

现在，当您使用 myvalue 绑定时，您的模型将在初始绑定时使用控制值进行更新：

<input type="text" data-bind="myvalue: name"></input>

或者，您可以调用原始值而不是复制所有代码，只需在 init 之后添加 valueUpdateHandler 中的代码：

ko.bindingHandlers['myvalue'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        // call existing value init code
        ko.bindingHandlers['value'].init(element, valueAccessor, allBindingsAccessor);

        // valueUpdateHandler() code
        var modelValue = valueAccessor();
        var elementValue = ko.selectExtensions.readValue(element);
        ko.jsonExpressionRewriting.writeValueToProperty(modelValue, allBindingsAccessor, 'value', elementValue, /* checkIfDifferent: */ true);
    },
    'update': function (element, valueAccessor) {
        // call existing value update code
        ko.bindingHandlers['value'].update(element, valueAccessor);
    }
};

如果您不想使用 AJAX，您始终可以通过将模型序列化为 JSON（剃须刀语法）将值导入 javascript：

<script type="text/javascript">
var model = @(new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)));
</script>

【讨论】：

最后一部分是我正在寻找的确切答案。这是极好的。当然，必须将它包含在我的直接 aspx 文件中，然后从外部 JS 文件中引用它，这有点可惜，但尽管如此，这正是我所寻找的。谢谢！

【解决方案2】：

这里有一个工作示例（不是我的），有几种不同的方法来实现这一点：

http://jsfiddle.net/rniemeyer/5Z2SC/

【讨论】：