knockoutJS 激活/停用值输入

Question

几周前，我开始使用 typescript 和 knockoutJS，我有一个特定的问题，但我有解决方案，它太丑了，我无法忍受，但无法从中得到更好的结果，要粘贴的代码太多，但我会尽力描述我的问题：

我有两个与同一个数据模型通信的视图模型。假设模型是一个名为 Numbers 的简单对象数组。每个数字都有以下属性：Value、isMinValueEnabled、minValue、isMaxValueEnabled、maxValue、isStepEnabled、stepValue、valueFormat。 valueFormat 可能是数字或百分比（因此 value、min、max 和 step 乘以 100）。我可以激活最小值、最大值和阶跃值并停用它们。然后将数据保存到模型并在另一个视图模型中执行完全相同的操作（有一些限制）。

问题在于那些可选参数和百分比值，因为当我读取数据时，我首先检查 Number 是否为百分比以及是否每个属性都已启用。然后我最终将值乘以 100（如果已设置）。保存数据时我必须做同样的操作，即检查每个数字的格式和是否已启用并最终除以 100。使用 3-4 个属性没有问题，但现在我必须再写一些可选的取决于格式和启用/禁用状态的属性，我遇到了很多 if 语句的麻烦，我自己什至无法阅读。在这种情况下可以使用更好的模式吗？

编辑

好的，事情看起来像这样：我有一系列数字，它们可能看起来像： 100, 2 000, 34 000.21, 2.1k, 2.11M, 22% 但这些只是显示值，而对于给出的示例，实际值应该是这样的：100, 2000, 34000.21, 2100, 2110000, 0.22。用户可以将值编辑为其他任何值，例如，假设输入中有 22%，然后将其编辑为 1k。我将 1k 转换为原始值 1000 并检查是否设置了该数字的 minimumValue 和 maximumValue。如果是，我会检查，假设 maxValue 是 800，那么用户输入不能再是 1k，而是 0.8k，因为他无法摆脱 maximumValue。 MinimumValue、MaximumValue、StepValue 等是每个数字的属性。我在玩 ko.pureComputed，但我需要以某种方式抽象它：

var f = ko.computed(<KnockoutComputedDefine<number>>{
            read: ...
            write: ... 
        });

我现在拥有的东西完全丑陋，看起来像这样：

export class Variable {
    [...]
    public inputType: KnockoutObservable<VariableInputType>;
    public typeAndFormat: KnockoutObservable<DataTypeFormat>;
    public isMinEnabled: KnockoutObservable<boolean>;
    public minValue: KnockoutObservable<number>;
    public isMaxEnabled: KnockoutObservable<boolean>;
    public maxValue: KnockoutObservable<number>;
    public isStepEnabled: KnockoutObservable<boolean>;
    public stepValue: KnockoutObservable<number>;
    public value: KnockoutObservable<number>;
    [...]

    constructor(...) {
        [...]
        this.inputType = ko.observable(VariableInputType.Input);
        this.typeAndFormat = ko.observable(variable.typeAndFormat || DataTypeFormat.Number);

        if (variable.minValue !== null) {
            this.isMinEnabled = ko.observable(true);
            this.minValue = ko.observable(variable.minValue);
        } else {
            this.isMinEnabled = ko.observable(false);
            this.minValue = ko.observable(null);
        }
        if (variable.maxValue !== null) {
            this.isMaxEnabled = ko.observable(true);
            this.maxValue = ko.observable(variable.maxValue);
        } else {
            this.isMaxEnabled = ko.observable(false);
            this.maxValue = ko.observable(null);
        }
        if (variable.step !== null) {
            this.isStepEnabled = ko.observable(true);
            this.stepValue = ko.observable(variable.step);
        } else {
            this.isStepEnabled = ko.observable(false);
            this.stepValue = ko.observable(null);
        }
        if (variable.defaultValue !== null) {
            this.value = ko.observable(variable.defaultValue);
        } else {
            this.value = ko.observable(0);
        }

        if (this.typeAndFormat() === DataTypeFormat.NumberPercentage) {
            this.value(this.value() * 100);
            if (this.isMinEnabled()) this.minValue(this.minValue() * 100);
            if (this.isMaxEnabled()) this.maxValue(this.maxValue() * 100);
            if (this.isStepEnabled()) this.stepValue(this.stepValue() * 100);
        }

        [...]

        this.isMinEnabled.subscribe((v) => { if (v !== true) this.minValue(null) }, this);
        this.isMaxEnabled.subscribe((v) => { if (v !== true) this.maxValue(null) }, this);
        this.isStepEnabled.subscribe((v) => { if (v !== true) this.stepValue(null)}, this);
        [...]
    }

    public getModifiedVariable() {
        [...]
        this.originalData.typeAndFormat = this.typeAndFormat();
        this.originalData.minValue = this.minValue();
        this.originalData.maxValue = this.maxValue();
        this.originalData.step = this.stepValue();
        this.originalData.defaultValue = this.value();
        [...]

        if (this.typeAndFormat() === DataTypeFormat.NumberPercentage) {
            this.originalData.defaultValue = this.originalData.defaultValue / 100;
            if (this.isMinEnabled()) this.originalData.minValue = this.originalData.minValue / 100;
            if (this.isMaxEnabled()) this.originalData.maxValue = this.originalData.maxValue / 100;
            if (this.isStepEnabled()) this.originalData.step = this.originalData.step / 100;
        }
        [...]
        return this.originalData;
    };

    [...]
}

具有更多验证和限制的第二个视图模型看起来更糟糕......我真的不知道如何抽象它以便我和其他人都可以阅读。

Answer 1

有两个不同的问题

1. 您需要一个需要格式化的自定义可视化和一个需要解析的自定义数据输入
2. 您需要添加一些业务逻辑（值验证）

第一个问题可以using an extender解决。使用这种技术，您的 observable 必须存储实际值，而不是格式化值。您可以使用它来添加一个子observable，可以称为formattedValue。这个一定是writable computed observable，这两个函数：

• read：格式化底层的实际值，格式化后返回，让用户对值有一个漂亮的看法
• write：解析从用户输入接收到的值，并将结果存储在底层的实际值中

您可以找到这些扩展器的示例：Three Useful Knockout Extenders。扩展器可以接收参数，以便可以单独配置它们（在您的情况下，您可以设置百分比、步长等）。这种技术的另一个重要例子是ko.valdiation library。

如果你使用这种技术，你需要在 HTML 中绑定子 observable，而不是底层的 observable 与真正的值，即：

<input type="text" data-bind="value: vm.someValue.formattedValue"/>

如上所述，formattedValue 是一个新的子 observable，它格式化/解析值。

第二个问题也可以用writable computed observables解决。您可以在 write 方法中添加验证逻辑，以便在任何时候修改值时都会对其进行验证、拒绝或更正，具体取决于您要执行的操作。计算出的 observable 可以访问视图模型中的其他值，因此它的实现应该很容易。当然，验证逻辑必须使用实际值访问可观察对象。即它可以完全忽略可观察对象是否被扩展。

这种实现的最大优点是您可以独立地实现对每个所需功能的测试：

• 实现和测试解析/格式化扩展器，扩展器中的格式/解析
• 实现并测试可写计算 observable 中的业务逻辑

一旦实施了测试，就开始一起使用它们。