淘汰赛-通过在对象上设置属性来更改对象的“子类”

Question

In Knockout, I have an array of Setting entities which may be of different types (ie 'subclasses' of the Setting entity). These types are dynamic, they may be changed by the user in the UI. Depending on what type the Setting entity is, it requires different object properties, and makes others redundant.

What I'm currently doing (which I want to change), is defining one Setting constructor which has all required properties for all setting types; making the constructor quite huge, and containing a lot of unnecessary properties. When the app data is saved I 'ignore' the properties which shouldn't be on Setting instances according to their types.

I've given it a try in this fiddle , using a subscription on the type property to add/ remove properties on type change. I'd like to know if it is possible in KnockoutJS to reliably change the properties on an object during run-time (ie will the subscription always fire before the template is updated? ) and will this have any [positive] impact on performance? . Or is this approach totally wrong and should I replace the entire object with a subclass instance (if so, won't the subscriptions go lost)?

EDIT: The dependant properties are actual data (so they should be saved to their models, not only available in the view). I've tried the component approach but how do I retrieve their properties later? http://jsfiddle.net/kevinvanlierde/zmx3u4an/1/

Answer 1

Use components that are bound in your settings editor but owned by each individual subclass instance.

<div data-bind="foreach: settings">
    <select data-bind="options: $root.types, value: type"></select>
    <input type="text" data-bind="textInput: value"/>
    <div data-bind="component: { name: componentName, params: componentParams }"></div>
</div>

Example component name/params for the color setting. These properties would be different for different settings subclasses.

this.componentName = 'color-viewer';
this.componentParams = {
    colorText: this.value,
};

With this approach, changing the current setting "type" would require you to replace one settings subclass instance with another. This might be a hassle in a trivial case but there's advantages to keeping your models small with a single responsibility.

Answer 2

To address saving the properties, I reworked the component code. Some members (mostly computeds) are only for the view, and should not be saved, so I put the save-able stuff in a "data" member:

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

Each specialized type is going to add its special members to the base object, and will add a method, toSetting , to revert it back to the base object type. The base type has a do-nothing version of toSetting in its prototype, so it is always safe to call toSetting first thing in the type converter.

I added a headingSize parameter to the Title type, and made it determine what heading size the text displays in.

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

I registered it like this:

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

And I added a button to "save" the settings, which displays what will be saved at the bottom of the page.

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