继承durandal (HotTowel)视图模型？

Question

简单的问题，我很确定这是一个复杂的答案:)

是否有可能在Durandal中为视图模型实现某种形式的继承？

因此，如果你有一个类似这样的视图模型：

define(['durandal/app', 'services/datacontext', 'durandal/plugins/router', 'services/logger'],
    function (app, datacontext, router, logger) {
        var someVariable = ko.observable();
        var isSaving = ko.observable(false);

        var vm = {
            activate: activate,
            someVariable : someVariable,
            refresh: refresh,
            cancel: function () { router.navigateBack(); },
            hasChanges: ko.computed(function () { return datacontext.hasChanges(); }),
            canSave: ko.computed(function () { return datacontext.hasChanges() && !isSaving(); }),
            goBack: function () { router.navigateBack(); },
            save: function() {
                isSaving(true);
                return datacontext.saveChanges().fin(function () { isSaving(false); })
            },
            canDeactivate: function() {
                if (datacontext.hasChanges()) {
                    var msg = 'Do you want to leave and cancel?';
                    return app.showMessage(msg, 'Navigate Away', ['Yes', 'No'])
                        .then(function(selectedOption) {
                            if (selectedOption === 'Yes') {
                                datacontext.cancelChanges();
                            }
                            return selectedOption;
                        });
                }
                return true;
            }
        };

        return vm;

        //#region Internal Methods
        function activate(routeData) {
            logger.log('View Activated for id {' + routeData.id + '}, null, 'View', true);
            });
        }
        //#endregion

        function refresh(id) {
            return datacontext.getById(client, id);
        }
    });

有没有可能把它变成某种基类型，并从它继承更多的视图模型，能够扩展requires列表等等？

关于这个还有另一个问题，但视图模型似乎与我为durandal/HotTowel构建的视图模型不太一样。

谢谢。

Answer 1

只是根据你说的我想出了这个。如果这对你有效，让我知道，如果它不起作用，那么让我知道我做错了什么。

谢谢。

viewmodelBase

define(['durandal/app', 'services/datacontext', 'durandal/plugins/router', 'services/logger'],
    function (app, datacontext, router, logger) {
        var vm = function () {
            var self = this;
            this.someVariable = ko.observable();
            this.isSaving = ko.observable(false);
            this.hasChanges = ko.computed(function () { return datacontext.hasChanges(); });
            this.canSave = ko.computed(function () { return datacontext.hasChanges() && !self.isSaving(); });
        };

        vm.prototype = {
            activate: function (routeData) {
                logger.log('View Activated for id {' + this.routeData.id + '}', null, 'View', true);
            },
            refresh: function (id) {
                return datacontext.getById(client, id);
            },
            cancel: function () {
                router.navigateBack();
            },
            goBack: function () { router.navigateBack(); },
            save: function() {
                var self = this;
                this.isSaving(true);
                return datacontext.saveChanges().fin(function () { self.isSaving(false); })
            },
            canDeactivate: function() {
                if (datacontext.hasChanges()) {
                    var msg = 'Do you want to leave and cancel?';
                    return app.showMessage(msg, 'Navigate Away', ['Yes', 'No'])
                        .then(function(selectedOption) {
                            if (selectedOption === 'Yes') {
                                datacontext.cancelChanges();
                            }
                            return selectedOption;
                        });
                }
                return true;
            }
        };

        return vm;
    });

父视图模型

define([viewmodelBase], function (vmbase) {
    var vm1 = new vmbase();
    vm1.newProperty = "blah";
    var vm2 = new vmbase();
});

Answer 2

我非常确定这可以通过jQuery的extend方法来完成。这是我刚刚想到的，所以我可能遗漏了一些东西，但一个基本的例子是这样的：

basevm.js

... your mentioned viewmodel

inheritingvm.js

define(['basevm'], function (basevm) {
   var someNewObservable = ko.observable();

   var vm = $.extend({
        someNewObservable : someNewObservable
   }, basevm);

   return vm;
});

请让我知道这是否有效。我只是从我的头顶开始编程，它还没有经过测试。

Answer 3

我在我的博客上写了一篇文章来解决这个问题。简而言之，我对我的一个项目中的所有模式对话框视图都使用原型继承。这是我写的那篇文章的link (请随意跳到代码部分)和一个演示它的jsFiddle example。

可以在Durandal中工作的简化示例(注意:每个视图模型都返回其构造函数，而不是对象)：

viewmodels/modal.js

define(['durandal/system'], 
function(system) { 
  var modal = function () {
    this.name = 'Modal';
  }

  modal.prototype = {
    activate: function() {
        system.log(this.name + ' activating');
    },
    attached: function(view) {
        system.log(this.name + ' attached');
    },
    deactivate: function() {
        system.log(this.name + ' deactivating');
    },
    detached: function(view, parent) {
        system.log(this.name + ' detached');
    }
  };

  return modal;
});

viewmodels/child.js

define(['durandal/system', 'viewmodels/modal'],
function(system, Modal) {
  var child = function() {
    this.name = 'Child Modal';
  }

  // inherits from Modal
  child.prototype = new Modal();
  child.prototype.constructor = child;
  child.prototype._super = Modal.prototype;

  // overrides Modal's activate() method
  child.prototype.activate = function() {
    this._super.activate.call(this);  // we can still call it from the _super property
    system.log(this.name + ' activating [overridden version]');
  };

  return child;
});

我更喜欢这个实现，因为它支持代码重用，尽可能符合OOP原则，并且它使我能够在需要时通过_super属性调用基类的方法。你可以根据需要很容易地转换它。