javascript - knockoutJS 激活/停用值输入

Question

几周前，我开始使用 typescript 和 knockoutJS，我有一个具体的问题，但我有解决方案，它太丑了，我无法忍受，但无法从中得到任何更好的东西，有太多代码需要粘贴，但我会尽力描述我的问题:

我有两个与同一数据模型通信的 View 模型。假设该模型是一个称为“数字”的简单对象数组。每个数字都有以下属性:Value、isMinValueEnabled、minValue、isMaxValueEnabled、maxValue、isStepEnabled、stepValue、valueFormat。 valueFormat 可以是数字或百分比(以便值、最小值、最大值和步长乘以 100)。我可以激活最小值、最大值和步长值并禁用它们。然后将数据保存到模型中，并在另一个 viewModel 中执行完全相同的操作(有一些限制)。

问题在于这些可选参数和百分比值，因为当我读取数据时，我首先检查 Number 是否为百分比以及每个属性是否已启用。然后我最终将值乘以 100(如果已设置)。当我保存数据时，我必须执行相同的操作，即检查每个数字的格式和 is*Enabled 并最终除以 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，并检查是否设置了该数字的最小值和最大值。如果是，我会检查，假设 maxValue 是 800，那么用户输入不能再是 1k，而是 0.8k，因为他无法超出 maxValue。最小值、最大值、步长值等是每个数字的属性。我正在使用 ko.pureCompulated，但我需要以某种方式抽象它:

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

    [...]
}

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

Answer 1

有两个不同的问题

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

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

• 读取:格式化底层实际值，并返回格式化后的值，以便用户对值有一个漂亮的 View
• write:解析从用户输入接收到的值，并将结果存储在底层实际值中

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

如果你使用这种技术，在 HTML 中你需要绑定(bind)子 observable，而不是底层 observable 与真实值，即:

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

正如所解释的，formattedValue 是一个新的子可观察对象，用于格式化/解析值。

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

此实现的最大优点是您可以独立实现测试每个所需的功能:

• 实现并测试解析/格式化扩展器、扩展器中的格式/解析
• 实现并测试可写计算可观察量中的业务逻辑

一旦实现并经过测试，就开始一起使用它们。