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 回答