Question

我必须以不同的方式编写和阅读radiobuttons的checked-binding，就像使用computedBinding一样。我不想为每个单选按钮搞乱使用ComputedObservables的ViewModel。所以我试图控制标记中绑定文本的绑定。也许它的例子越来越清晰。

实施例：用户应该能够使用单位设置值。他可以选择单位并设定值。有一个共同的值，用户应该能够选择（Radiobuttons）。尽管如此，应该可以写出特定的值（输入）。这是标记（My itention通过＆＃34; bindings＆＃34; checked-read，cheacked-write表示）。

<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>

这样的事情可能吗？

Answer 1

如果在无线电输入上设置value属性，则Knockout将根据它设置您的可观察量。从您发布的示例中，我相信您应该能够对可观察对象使用标准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 });
    }
};

绑定文本中的双向检查绑定（如computedObeservable）

1 个答案: