javascript - 单选按钮绑定(bind)到 knockout 计算

Question

我认为 knockoutjs writables computes observables 有一些问题。
我创建了一个 fiddle .

我需要的其实没那么难:
我有可为 null 的 WeightInGramms 和 VolumeInMilliliters 值。
这些值应该绑定(bind)到两个输入字段(只有其中一个应该是可见的)。
在顶部，用户可以通过单选按钮选择他想使用的这些值中的哪一个。

在初始化时，当它们都为空时，“g”单选按钮应该被选中，当 WeightInGramms 不为空时也是如此。当 VolumeInMilliliters 有一些值时，应该选中“ml”单选按钮。

为此我使用了knockoutjs writable computes observable，如果有更好的方法请指正!

因此，当我更改绑定(bind)到 WeightInGramms 或 VolumeInMilliliters 的输入值时，读取功能似乎有效。但是，当我更改单选按钮时，什么也没有发生……

var ViewModel = function (data) {
    var self = this;
    this.VolumeInMilliliters = ko.observable(data.VolumeInMilliliters);
    this.WeightInGramms = ko.observable(data.WeightInGramms);

    this.GrammIsSelected = ko.computed({
        read: function() {
            return (!self.WeightInGramms() && !self.VolumeInMilliliters()) || !self.VolumeInMilliliters();
    },
        write: function (newValue) {
            console.log(newValue);
            return newValue;
        },
        owner: this
    });

};

当我更改单选按钮时，相应的输入字段应该是可见的:

<div data-bind="visible: GrammIsSelected">g is active</div>
<div data-bind="visible: !GrammIsSelected()">ml is active</div>

编辑:
第一次加载表单时，两个值都将为空 -> 应选中“g”按钮。

Observable 可以通过以下方式初始化:

null, null  
33, null 
null, 33

两者都可以为空，但只有其中一个可以有值。如果用户键入一个值，然后单击另一个单选按钮，则该值可以应用于另一个值。

我希望它更清晰一些

Answer 1

一些提示:

• 使您的 viewModel (JS) 尽可能类似于 View (HTML)。此外，这避免了重复过多的标记。在这种情况下，单选按钮始终是列表，因此将选项存储在数组中最方便。
• 您不应测试是否 GrammIsselected，而应定义一个包含所选指标的 selected observable。这样，如果您添加更多选项，代码仍然可以工作而无需重构。
• 什么时候使用计算属性？计算属性通过计算基于多个可观察值/变量的结果来添加 readonly 值。可写计算属性的作用相同，只是您可以写回 更改。这使得它对于“全选”样式复选框(参见 example 2 in the docs)、数据验证和转换特别有用。

对于您想要实现的目标，最明确的设置如下:

var ViewModel = function (data) {
    this.metrics = [
        { name: 'g',  value: ko.observable(data.WeightInGramms) },
        { name: 'ml', value: ko.observable(data.VolumeInMilliliters) }
    ];
    this.selectedMetric = ko.observable(this.metrics[0]);
};

通过将对象设置为可观察对象 (selectedMetric)，您可以进一步简化体积/重量输入的标记:

<div class="control-group">
    <label class="control-label">choose</label>
    <div class="controls" data-bind="with: selectedMetric">
        <input type="text" data-bind="value: value">
        <span class="help-inline" data-bind="text: '(' + name + ')'"></span>
    </div>
</div>

获取应用的“最终值”就像检索 selectedMetric().value() 一样简单。

计算属性在这里不是很有用，但是例如，如果你想为用户提供一种方法来设置带有单选按钮和文本的 g/ml，你可以将以下方法添加到你的 viewModel:

this.selectedMetricByText = ko.computed({
    read: function() {
        return this.selectedMetric().name;
    },
    write: function(value) {
        var newMetric = ko.utils.arrayFirst(this.metrics, function(metric) {
            return metric.name === value;
        }) || false;
        this.selectedMetric(newMetric || this.metrics[0]);
    }
}, this);

Fiddle