修改

Question

几个星期前我已经开始使用打字稿和knockoutJS，我有一个特定的问题，但我有解决方案，它是如此丑陋我不能忍受，但不能从中获得更好的东西，有太多的代码需要粘贴，但我会尽力描述我的问题：

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

问题在于这些可选参数和百分比值，因为当我读取数据时，我首先检查Number是否为百分比以及每个属性是否为Enabled。然后，如果设置了，我最终将值乘以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等是每个Number的属性。我正在玩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;
    };

    [...]
}

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

Answer 1

有两个不同的问题

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

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

读取：格式化基础实际值，并将其格式化返回，以便用户拥有美观的值视图
write：解析从用户输入接收的值，并将结果存储在基础实际值

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

如果使用这种技术，在HTML中你需要绑定子可观察对象，而不是具有实际值的基础可观察对象，即：

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

如上所述，formattedValue是一个新的子观察，它可以格式化/解析该值。

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

此实现的巨大优势在于您可以独立地实现每项所需功能的测试：

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

实施测试后，开始一起使用。

knockoutJS激活/停用值输入

修改

1 个答案: