如何使用Knockout JS应用绑定并保留输入值

Question

我正在构建一个HTML/NockoutJS应用程序。我的Web服务器返回一个表单，其中包含包含信息的输入字段。当我新建模型并执行ko.applyBindings时，输入值自然会被模型覆盖。

是否有一种方法可以执行ko.applyBindings，其中模型被自动加载输入字段的数据？

---

示例：https://jsfiddle.net/KeesCBakker/p7ygq5y2/1/

HTML:

Title: <input data-bind="textInput: title" value="MyTitle" placeholder="Nothing here!" /><br/>
Text: <input data-bind="textInput: text" value="MyText" placeholder="Nothing here!" /><br/>
<button id="bind">Bind!</button>

JS:

ko.bindingHandlers.initFromInput = {
  init: function(element, valueAccessor) {
    valueAccessor()(element.value);
  }
};
function Model() {
  this.title = ko.observable();
  this.text = ko.observable();
}
document.getElementById('bind').onclick = function() {
  var model = new Model();
  ko.applyBindings(model);
};

Answer 1

您可以使用自定义绑定，它告诉Knockout将输入值用作默认值，如下所示：

ko.bindingHandlers.initFromInput = {
    init: function(element, valueAccessor) {
        valueAccessor()(element.value);
    }
};

这是一个jsfiddle：http://jsfiddle.net/kv3zras3/3/

编辑：

有了新的绑定，您的数据绑定应该是这样的：

<input data-bind="initFromInput: title, value: title" value="MyTitle" placeholder="Nothing here!" />
<input data-bind="initFromInput: text, value:text" value="MyText" placeholder="Nothing here!" />

编辑：

如果你让绑定看起来像这样，有一种更好的方法可以实现这一点：

var origValueInput = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function(element, valueAccessor, allBindings) {
    if (allBindings.has('initValueFromInput')) {
        valueAccessor()(element.value);
    }
    origValueInput.apply(this, arguments);
};

你可以这样写你的数据绑定：

<input value="MyTitle" data-bind="initValueFromInput, value: title"/>
<input value="MyText" data-bind="initValueFromInput, value: text"/>

这是一把小提琴：https://jsfiddle.net/yy51kok5/

Answer 2

我最终改进了clean_coding的答案。在加载KnockoutJS后，将以下匿名方法添加到脚本中。它将重新路由textInput和value处理程序。

(function () {
    var z = ko.bindingHandlers.textInput.init;
    ko.bindingHandlers.textInput.init = function (element, valueAccessor, allBindings) {
        if (allBindings.has('initWithElementValue')) {
            valueAccessor()(element.value);
        }
        z.apply(this, arguments);
    };
    var y = ko.bindingHandlers.value.init;
    ko.bindingHandlers.value.init = function (element, valueAccessor, allBindings) {
        if (allBindings.has('initWithElementValue')) {
            valueAccessor()(element.value);
        }
        y.apply(this, arguments);
    };
}())

可以通过在textInput或value声明之后指定它来使用：

<input type="text" data-bind="textInput: title, initWithElementValue" />

Answer 3

最终为Knockout创建了一个插件。将其添加到GitHub中。

<script type="text/javascript" src="https://cdn.rawgit.com/KeesCBakker/KnockoutAutomaticFormValueBinding/master/knockout-automatic-form-value-binding-1.0.min.js"></script>

1. 包括插件
2. 设置ko.automaticFormValueBinding = true;
3. 绑定ko.applyBindings({yourmodel});

Git上的更多信息：https://github.com/KeesCBakker/KnockoutAutomaticFormValueBinding