兩個具有許多相同屬性的視圖模型 - 如何優化？

Question

在保持干燥的名義下，我想問一下，當試圖避免聲明重復屬性時，典型的方法是什么。 我有兩個viewModel：set和folder。 他們來了：

夾：

var folderViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);

    self.isHovering = ko.observable(false);
    self.showCheckbox = function () {
        self.isHovering(true);
    };
    self.hideCheckbox = function () {
        self.isHovering(false);
    };
    self.checkboxIsVisible = ko.computed(function () {
        return selectedItemsCount() > 0 || self.isHovering();
    }, self);
    self.softCheckboxIsVisible = ko.computed(function () {
        return selectedItemsCount() > 0 && self.isHovering() == false;
    }, self);
    self.canDrag = ko.computed(function () {
        if (selectedItemsCount() == 0 && !isAddingNewContent()) {
            return true;
        } else {
            return false;
        }
    }, self);
    self.isSelected = ko.observable(false);
    self.toggleSelected = function () {
        self.isSelected(!self.isSelected());
    };
    self.textSelected = ko.observable(false);
    self.toggleTextSelected = function () {
        self.textSelected(!self.textSelected());
    };
    self.isSet = ko.observable(false);
    self.isDeleting = ko.observable(false);
    self.isNew = ko.observable(false);
    // If the folder hasn't been created yet, it won't have a folderId
    if (typeof self.folderId === 'undefined') {
        self.isNew(true);
    }
    self.isEditing = ko.observable(false).publishOn("IS_EDITING_CONTENT");
    // monitor for clicks 
    // temp title
    self.oldTitle = ko.observable();
};

組：

var setViewModel = function (data) {
    var self = this;

    // Checkbox controls
    self.isHovering = ko.observable(false);
    self.showCheckbox = function () {
        self.isHovering(true);
    };
    self.hideCheckbox = function () {
        self.isHovering(false);
    };
    self.checkboxIsVisible = ko.computed(function () {
        return selectedItemsCount() > 0 || this.isHovering();
    }, self);
    self.softCheckboxIsVisible = ko.computed(function () {
        return selectedItemsCount() > 0 && this.isHovering() == false;
    }, self);

    self.canDrag = ko.computed(function () {
        if (selectedItemsCount() == 0 && !isAddingNewContent()) {
            return true;
        } else {
            return false;
        }
    }, self);
    self.isSelected = ko.observable(false);
    self.toggleSelected = function () {
        self.isSelected(!self.isSelected());
    };
    self.textSelected = ko.observable(false);
    self.toggleTextSelected = function () {
        self.textSelected(!self.textSelected());
    };
    self.isSet = ko.observable(true);

    ko.mapping.fromJS(data, {}, self);
    self.isDeleting = ko.observable(false);
    self.isNew = ko.observable(false);
    // If the folder hasn't been created yet, it won't have a folderId
    if (typeof self.setId === 'undefined') {
        self.isNew(true);
    }
    self.isEditing = ko.observable(false).publishOn("IS_EDITING_CONTENT");
    // temp title
    self.oldTitle = ko.observable();

};

viewModel之間復制了很多這些屬性。 我應該保持原樣，還是有一個很好的方法來壓縮這些代碼？

Answer 1

嘗試繼承怎么樣？ 您可以使用（set和文件夾）都具有的屬性和函數對原型viewModel進行編程，然后為setViewModel和與ViewModel具有相同原型的folderViewModel定義新的“類”，只添加他們擁有的屬性和函數。

javascript中的繼承簡介可以在這里找到...

Answer 2

創建一個幫助器方法，兩個viewmodel構造函數調用以添加所有公共屬性...

var helper = function (self, data) {
    self.isHovering = ko.observable(false);
    // ...
    return self;
};
var setViewModel = function (data) {
    var self = helper(this, data);
    // extra stuff
};
var folderViewModel = function (data) {
    var self = helper(this, data);
    // extra stuff
};