从 HTML 标记中为 observable 赋予初始值

Question

我正在尝试创建一个HtmlHelper 扩展，它将一些 HTML 输出到视图。在这个 HTML 中，我正在连接一些 KnockoutJS 绑定。我是 KO 的新手，所以我仍然在努力完成一些事情。无论如何，我要做的是在客户端代码上生成绑定到可观察对象的输入字段（在服务器端代码中），然后通过隐藏字段的值设置可观察对象的初始值。不幸的是，这对我不起作用。所以我想知道是否有任何方法可以完成这项工作（即使我必须完全不同）。

这就是我基本上在做的事情：

在我的客户端视图模型中，我有以下内容：

self.dataSource = ko.observable();
self.pageSize = ko.observable();

我的扩展方法输出如下：

<input type="hidden" value="/Employee/Get" data-bind="value: dataSource" />
<input type="hidden" value="30" data-bind="value: pageSize" />

但是当页面呈现时，当我检查元素时，我注意到输入字段的value 被设置为空字符串，我认为这是因为声明了可观察对象的方式。但是有没有办法覆盖这种行为？

Answer 1

您可以用来使代码更简洁的另一种方法是使用自定义绑定，该绑定通过使用元素的当前值对其进行初始化来包装值绑定。

您甚至可以让它在您的视图模型上创建可观察对象，如果它们不存在的话。

绑定可能类似于：

ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data) {
        var property = valueAccessor(),
            value = element.value;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }

        data[property](value);

        ko.applyBindingsToNode(element, { value: data[property] });
    }
};

你会像这样使用它：

<input value="someValue" data-bind="valueWithInit: 'firstName'" />

请注意，属性名称用引号引起来，这允许绑定创建它，如果它不存在而不是从未定义的值中出错。

这是一个示例：http://jsfiddle.net/rniemeyer/BnDh6

Answer 2

这里有点晚了。我实际上对 RP 的回答并不满意，因为它破坏了 Knockout 的声明性。具体来说，如果你使用 valueWithInit 来定义你的属性，你就不能在之前的绑定中使用它。这是fork of his jsfiddle to demonstrate。

您以相同的方式使用它，但它仍然是文档范围内的声明性：

<input data-bind="valueWithInit: firstName" value="Joe" />

扩展思路，也可以用这个来分离初始化和绑定：

<input data-bind="initValue: lastName, value: lastName" value="Smith" />

这有点多余，但当您使用插件而不是内置绑定时会变得有用：

<input data-bind="initValue: lastName, myPlugin: lastName" value="Smith" />

再扩展一点，我还需要一种初始化复选框的方法：

<input type="checkbox" data-bind="checkedWithInit: isEmployed" checked />

这里是处理程序：

ko.bindingHandlers.initValue = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        if (!ko.isWriteableObservable(value)) {
            throw new Error('Knockout "initValue" binding expects an observable.');
        }
        value(element.value);
    }
};

ko.bindingHandlers.initChecked = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        if (!ko.isWriteableObservable(value)) {
            throw new Error('Knockout "initChecked" binding expects an observable.');
        }
        value(element.checked);
    }
};

ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindings, data, context) {
        ko.applyBindingsToNode(element, { initValue: valueAccessor() }, context);
        ko.applyBindingsToNode(element, { value: valueAccessor() }, context);
    }
};

ko.bindingHandlers.checkedWithInit = {
    init: function(element, valueAccessor, allBindings, data, context) {
        ko.applyBindingsToNode(element, { initChecked: valueAccessor() }, context);
        ko.applyBindingsToNode(element, { checked: valueAccessor() }, context);
    }
};

注意 valueWithInit 只是在后台使用 initValue。

看in action on jsfiddle。

Answer 3

如果自定义绑定过于繁重，那么一个简单的解决方案是从 DOM 初始化可观察对象。

例如，给定以下 HTML 表单：

<form name="person">
  <input type="text" name="firstName" value="Joe" data-bind="value: firstName"/>
</form>

那么Knockout可以如下初始化：

ko.applyBindings({
  firstName: ko.observable(document.forms['person']['firstName'].value)
});

Answer 4

您可以简单地使用 custom binding 并将值分配给现有的 observable：

ko.bindingHandlers.yourBindingName = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        viewModel.dataSource($(".dataSource").val());
        viewModel.pageSize($(".pageSize").val());
    }
};

然后，只需将一个类或一个 Id 添加到输入，并将 data-bind="yourBindingName" 添加到包含它们的 HTML 元素。