viewmodelBase

Question

简单的问题，很确定这是一个复杂的答案：）

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

所以如果你有一个像这样的viewmodel：

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

是否可以将其转换为某种基类型并从中继承其他视图模型，能够扩展需求列表等等？

还有另一个问题，但是视图模型似乎与我为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;
});

我更喜欢这种实现，因为它支持代码重用，符合JOP允许的最佳OOP原则，并且它使我能够在需要时通过_super属性调用基类的方法。您可以根据需要轻松转换它。

durandal（HotTowel）视图模型的继承？

3 个答案:

viewmodelBase

父视图模型