Question

我正在构建一个HTML / KnockoutJS应用程序。我的网络服务器返回一个包含信息输入字段的表单。当我新建模型并执行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。

<xsl:template match="/root">
    <xsl:apply-templates select="handlingInstruction/handlingInstructionText"/>
</xsl:template>

<xsl:template match="handlingInstructionText">
    <xsl:value-of select="."/>
    <xsl:if test="position()!=last()">
        <xsl:text>,</xsl:text>
    </xsl:if>
</xsl:template>

包含插件
设置<script type="text/javascript" src="https://cdn.rawgit.com/KeesCBakker/KnockoutAutomaticFormValueBinding/master/knockout-automatic-form-value-binding-1.0.min.js"></script>
绑定ko.automaticFormValueBinding = true;

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

如何使用Knockout JS applyBindings并保持输入值？

3 个答案: