1

我正在寻找一种更好的方法来处理我的 DurandalJS 应用程序中的继承，从baseViewModel.js其他页面。这是我当前的应用程序结构：

  • baseViewModel.js
  • 主壳
    • 第 1 组外壳
      • 第 1 页
      • 第2页
    • 第 2 组外壳
      • 第 1 页
      • 第2页

所有这些页面都有一些共同的功能（baseViewModel.js），例如：

  • isLoading：用于检查页面上是否正在加载内容的 observable
  • isValid：检查表单是否有效
  • 添加和删​​除项目的 afterAdd 和 beforeRemove 效果
  • 表单的键盘快捷键
  • 模板切换功能
  • ETC

目前如何运作

  1. 里面的所有东西都baseViewModel.js被声明为self.*self 是对 Window 对象的引用，例如：

    self.showElement = function(elem) {
  if (elem.nodeType === 1) $(elem).hide().fadeIn();
}

self.fadeRemove = function(elem) {
  if (elem.nodeType === 1) $(elem).fadeOut(500, function() { $(elem).remove(); });
}

  2. 我baseViewModel.js只在主 shell 中定义一次，然后通过应用程序访问它，如下所示：

    <tbody data-bind="foreach: { data: dataArr, afterAdd: showElement, beforeRemove: fadeRemove }">

    或在视图模型内：

    Page1.load = function() {
  self.isLoading(true);
  // get data
};

我试过的

我研究了原型继承并设法让它工作，但我不确定我实现它的方式。我在Base里面创建了一个函数baseViewModel.js并将其作为单例返回。然后在其中一页内，我做了：

define(['durandal/app', 'jquery', 'knockout', 'baseViewModel'], function (app, $, ko, base) {

  var Page1 = function() {};

  Page1.prototype = base;

  return Page1;

});

Base 中声明的函数在 Page1 的视图和视图模型中工作得很好，但问题是我需要它们在与 Page1 一起加载的所有模块中工作。这包括：

  • 第 1 组 shell 视图（有一个按钮可以激活 Base 内的功能）
  • 主 shell 视图（加载栏基于isLoadingBase 内的 observable 的值可见）

为了让这些工作，我必须定义文件并*.prototype = base;在每个视图模型中应用相同的文件。

那么有没有更好的方法来处理继承？如果没有，有没有办法只声明一次基础并将其应用于所有子页面？

谢谢！

4

2 回答 2

3

我将原型继承与工厂方法结合使用，到目前为止它似乎运行良好。我只想要简单的继承，所以这不是像某些继承库那样的全功能继承方法。

正如 PW 建议的那样，我确实将基本视图模型包装在 requireJs 模块中。

这是一个简化的代码示例，但它应该是功能性的。让我知道它是否没有意义，我可以详细说明。

基本视图模型

define(function (require) {
    "use strict";

    function ViewModelBase() {

        //this is the activate function that Durandal will call
        function activate() {

            //call activate on derived vm
            if (this.onActivate) {
                return this.onActivate.apply(this, arguments);
            } else {
                return true;
            }
        }

        //validate view model and display all remaining errors
        function validate() {
            // passing 'this' so that the viewmodel instance is evaluated at the time it's needed 
            return validation.validateViewModel(this);   //this is knockout validation
        }

        //exports
        this.activate = activate;
        this.validate = validate;
    };

    //return the constructor (non-singleton)
    return ViewModelBase;
});

工厂

define(function (require) {
    "use strict";

    return {
        createViewModel: function (ctor) {
            ctor.prototype = new (require("view-model-base"))();
            ctor.prototype.constructor = ctor;
            return ctor;
        }
    };

});

派生视图模型

define(function (require) {
    "use strict";

    var factory = require("fusion/factory");
    var HomeViewModel = factory.createViewModel(function () {
        var __viewModel = this; //use __viewModel variable to access this view model instance.

        function onActivate() {
            //add application startup logic here

            //access public functions on the base view model like this:
            __viewModel.validate();

            return true;
        }
        this.onActivate = onActivate;
    });

    //returns the constructor (non-singleton)
    return HomeViewModel;

    //to return a singleton instead, do this
    return new HomeViewModel();


}); // END :: define statement
于 2013-10-11T14:05:05.310 回答
0

mixins是另一种可以考虑在模块之间共享功能的模式。 请注意@Joseph Gabriel 的答案绝对是正确的。对于某些用例，mixin 只是一个更轻的替代方案，但它们不提供任何类型的继承。

编辑示例和实时版本已更新，以更好地展示需要放置的位置，以便 a) 通用 b) 共享 c)​​ 在所有Page实例中唯一。

common.js

/*globals define */
define(['jquery', 'knockout'], function($, ko) {
    "use strict";

    // common must return a singleton
    return {
        commonObservable: ko.observable('commonObservable: Defined in common.js.  Click me...'),
        showElement: function( model, elem ) {
            var target = elem.currentTarget;
            if ( target.nodeType === 1 ) {
                $(target).hide().fadeIn();
            }
        },
        fadeRemove: function( model, elem ) {
            var target = elem.currentTarget;
            if ( target.nodeType === 1 ) {
                $(target).fadeOut(500, function() {
                    $(target).remove();
                });
            }
        }
    };
});

页面视图模型

/*globals define */
define(['durandal/app', 'jquery', 'knockout', './common'], function( app, $, ko, common ) {
    "use strict";
    var Page = function() {
        this.uniqueObservable = ko.observable('uniqueObservable: Page property. Click me... ');
    };

    // Extend the prototype with the common properties and
    // `extend` it further with shared properties
    $.extend(true, Page.prototype, common, {
         sharedObservable : ko.observable('sharedObservable: mixed in after common. Click me...')
    });


    return Page;

});

页面预览

<div>
    <h1>mixin sample</h1>

    <ul class="unstyled ">
        <li data-bind="text: commonObservable, click: fadeRemove"></li>
        <li data-bind="text: sharedObservable, click: fadeRemove"></li>
        <li data-bind="text: uniqueObservable, click: fadeRemove"></li>
    </ul>    
</div>

现场版可在：http ://dfiddle.github.io/dFiddle-2.0/#extras/mixin

于 2013-10-14T17:05:10.563 回答