Question

以保持DRY的名义，我想问一下在尝试避免声明重复属性时的典型方法。我有两个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定义新的“类”，只添加他们拥有的属性和函数。 / p>

javascript中的继承简介here...

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

两个具有许多相同属性的视图模型 - 如何优化？

2 个答案: