0

我必须以不同的方式编写和读取单选按钮的检查绑定,就像使用计算绑定一样。我不想用 ComputedObservables 为每个单选按钮搞乱 ViewModel。所以我试图控制标记中绑定文本的绑定。也许举个例子会更清楚。

示例:用户应该能够使用单位设置值。他可以选择单位并设置值。有一个共同的值,用户应该能够选择(单选按钮)。尽管如此,应该可以写入一个特定的值(输入)。这是标记(我的意图是通过“绑定”检查读取,检查写入来表达的)。

<label><input type="radio" name="valuRadios" data-bind="text: ' 0.08' + unitValue().Unit().shortName() + ' ', checked-write: function (value) { value ? unitValue.Value(0.08) : null; }, checked-read: function () { return unitValue.Value() == 0.08 }" /></label>
<label><input type="radio" name="valuRadios" data-bind="text: ' 0.25' + unitValue().Unit().shortName() + ' ', checked-write: function (value) { value ? unitValue.Value(0.25) : null; }, checked-read: function () { return unitValue.Value() == 0.25 }" /></label>
...
<div class="input-append">
   <input type="text" data-bind="value: unitValue().Value">
   <span class="add-on" ata-bind="text: unitValue().Unit().shortName()"><span>
</div>

这样的事情可能吗?

4

1 回答 1

2

如果您value在无线电输入上设置属性,那么 Knockout 将根据它设置您的 observable。从您发布的示例中,我相信您应该能够checked对可观察对象使用标准绑定。就像是:

<div data-bind="foreach: values">
    <input type="radio" name="valuRadios" value="0.25" data-bind="attr: { value: $data }, checked: $parent.myValue" />
    <label data-bind="text: $data"></label>
</div>

<input data-bind="value: myValue" />

 <div data-bind="text: myValue"><div>

与 JS 的:

ko.applyBindings({
    values: [0.08, 0.025, 0.15],
    myValue: ko.observable(0.08)
});

示例:http: //jsfiddle.net/rniemeyer/zPgwA/

如果场景有点复杂,那么我将使用的策略是创建一个自定义绑定,该绑定基于原始 observable 生成一个计算值,然后使用这个新的计算值绑定到元素上,例如:

ko.bindingHandlers.specialChecked = {
    init: function(element, valueAccessor) {
       var original = valueAccessor();

        var filter = ko.computed({
            read: function() {
                //return original() or some modified version of it
            },
            write: function(newValue) {
                //write to original(newValue) or modify newValue first
            },
            disposeWhenNodeIsRemoved: element
        });

        ko.applyBindingsToNode(element, { checked: filter });
    }
};
于 2013-05-27T13:44:08.713 回答