knockout.js负载形式进入视图模型 [英] knockout.js load form into viewModel

问题描述

我目前正在成功地利用knockout.js来处理我所有的数据绑定。但是，在每个页面加载，在我的document.ready我做一个初始asnychronous数据加载这样的：

I'm currently successfully using knockout.js to handle all of my data-binding in my application. However, on each page load, in my document.ready I'm doing an initial asnychronous data load like this:

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

不过，是有可能相反，数据加载到（使用ASP.NET MVC2）形式再反向将数据加载到基于数据绑定标签视图模型？

However, is it possible to instead, load the data into a form (using ASP.NET MVC2) and then reverse load the data into the view model based on the data-bind tags?

我喜欢这种感觉是不行的，我只是想确认我没有做任何事情不正确。

I feel like this doesn't work, I just want to confirm that I'm not doing anything improperly.

推荐答案

价值最初设置绑定你的视图模型的元素到一个值，所以没有。但是，你很可能复制code的'价值'绑定到你自己的处理程序，它从最初的控件的值设置模型值。下载淘汰赛的调试版本，并期待为 ko.bindingHandlers ['值'] = {在线2182复制此绑定处理程序声明和变化的'价值'别的东西，然后添加到valueUpdateHandler（）的调用在初始化的末尾：

The 'value' binding initially sets the value of the element to the one in your view model, so no. However, you could probably duplicate the code for the 'value' binding into your own handler that does initially set the model values from the values on the controls. Download the debug version of knockout, and look for ko.bindingHandlers['value'] = { on line 2182. Copy this binding handler declaration and change 'value' to something else, then add a call to valueUpdateHandler() at the end of init:

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

现在，当您使用myvalue的结合，你的模型将与控制值时更新最初的约束：

Now when you use the myvalue binding, your model will be updated with the control values when initially bound:

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

另外，您可以调用原始值，而不是复制所有code和刚刚从valueUpdateHandler初始化后添加code：

Alternatively you could call the original values instead of copying all the code, and just add the code from valueUpdateHandler after the init:

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：

If you don't want to use AJAX, you can always get the values into javascript by serializing your model as JSON (razor syntax):

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

这篇关于knockout.js负载形式进入视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！