Question

如果我有一个从服务器预先填充的HTML元素（例如PHP或ASP.NET），请执行以下操作：

<input type="text" data-bind="value:TheMeaningOfLife" data-revert-to="42" />

我宣布我的模型为

var TheMeaningOfLife = ko.observable(69);

如何使用data-revert-to的值初始化模型？我开始使用以下自定义绑定：

ko.bindingHandlers.serverValue = {
    init: function (element, valueAccesor, allBindingsAccessor, viewModel) {
        var el = $(element);
        var serverValue = el.data("revert-to");
        if (serverValue == undefined) {
            return;
        }

        el.val(serverValue);
    }
}

并将我的控件更新为

<input type="text" data-bind="serverValue:TheMeaningOfLife" data-revert-to="42" />

但这似乎会终止更新事件，因为当我更改文本框中的值时，viewmodel不会更新。

按照segfault的回答解决方案

我稍微调整了segfault的答案，以便更密切地关注服务器代码的发布方式：

ko.bindingHandlers.serverValue = {
    init: function (element, valueAccesor, allBindingsAccessor, viewModel) {
        var observable = valueAccesor();
        if (observable() == undefined) {
            var el = $(element);
            var serverValue = el.data("revert-to");
            observable(serverValue);
        }

        ko.applyBindingsToNode(element, { value: observable });
    }
}

这很好用。我只需要确保observable初始化为null，而不是空字符串。

Answer 1

看起来你永远不会检查observable，所以你总是使用revert值。如果您检查了值访问器，并且它提供的内容不会覆盖它。

<input type="text" data-bind="serverValue:TheMeaningOfLife, defaultValue='42'" />

ko.bindingHandlers.serverValue = {
            init: function (element, valueAccesor, allBindingsAccessor, viewModel) {
                var myValue = null;
                var observable = valueAccesor();
                if (observable() == undefined) {
                    observable(allBindingsAccessor.defaultValue);
                }
                ko.applyBindingsToNode(element, { value: observable });
            }
        }

如何从服务器初始化KO observable

1 个答案: