javascript - Knockout - 通过设置对象的属性来更改对象的 'subclass'

Question

在 Knockout 中，我有一个 Setting 实体数组，它们可能具有不同的类型(即设置实体的“子类”)。这些类型是动态的，用户可以在 UI 中更改它们。根据设置实体的类型，它需要不同的对象属性，并使其他属性变得多余。

我当前正在做的事情(我想要更改)是定义一个设置构造函数，它具有所有设置类型所需的所有属性；使构造函数非常庞大，并且包含许多不必要的属性。保存应用程序数据时，我“忽略”根据其类型不应出现在设置实例上的属性。

我已经在 this fiddle 中尝试过了，使用 type 属性的订阅来添加/删除类型更改时的属性。我想知道 KnockoutJS 是否可以在运行时可靠地更改对象的属性(即订阅是否总是在模板更新之前触发？)并且这会< strong>对性能有任何[积极]影响吗？。或者这种方法完全错误，我应该用子类实例替换整个对象(如果是这样，订阅不会丢失)吗？

编辑:依赖属性是实际数据(因此它们应该保存到模型中，而不仅仅是在 View 中可用)。我已经尝试过组件方法，但是稍后如何检索它们的属性？ http://jsfiddle.net/kevinvanlierde/zmx3u4an/1/

Answer 1

为了解决保存属性的问题，我重新设计了组件代码。有些成员(主要是计算的)仅用于 View ，不应保存，因此我将可保存的内容放在“数据”成员中:

function Setting(params) {
    var self = this;
    // What getData fetches
    self.data = {
        type: ko.observable(params.type),
        value: ko.observable(params.value || '')
    };
    self.data.type.subscribe(function (value) {
        // Give the conversion a little time
        setTimeout(function () {
            console.log("GetData:", self.getData());
        }, 30);
    });
}

每个专用类型都会将其特殊成员添加到基本对象中，并将添加一个方法toSetting，以将其恢复为基本对象类型。基本类型在其原型(prototype)中有一个不执行任何操作的 toSetting 版本，因此在类型转换器中首先调用 toSetting 始终是安全的。

我向标题类型添加了一个 headingSize 参数，并使其确定文本显示的标题大小。

function toTitle(setting) {
    var self = setting;
    var data = setting.data;
    var value = data.value();
    self.toSetting();
    data.headingSize = ko.observable(4);
    self.capitalized = ko.computed(function () {
        return value ? value.slice(0, 1).toUpperCase() + value.slice(1) : '';
    });
    self.headerText = ko.computed(function () {
        return '<h' + data.headingSize() + '>' + self.capitalized() + '</h' + data.headingSize() + '>';
    });
    self.toSetting = function () {
        delete self.data.headingSize;
        delete self.capitalized;
        delete self.toSetting;
    };
    return self;
}

我是这样注册的:

ko.components.register('title', {
    viewModel: toTitle,
    template: '<select data-bind="options:$root.sizes, value: data.headingSize"></select><div data-bind="html:headerText"></div>'
});

我添加了一个按钮来“保存”设置，该按钮在页面底部显示将保存的内容。

http://jsfiddle.net/1kfvesq3/3/