我正在寻找一种更好的方法来处理我的 DurandalJS 应用程序中的继承,从 baseViewModel.js
到其他页面。这是我当前的应用程序结构:
- baseViewModel.js
- 主壳
- 第 1 组外壳
- 第 1 页
- 第 2 页
- 第 2 组外壳
- 第 1 页
- 第 2 页
- 第 1 组外壳
所有这些页面都共享一些通用功能 (baseViewModel.js),例如:
- isLoading:用于检查页面上是否正在加载某些内容的可观察对象
- isValid:检查表单是否有效
- 添加和删除项目的 afterAdd 和 beforeRemove 效果
- 表单的键盘快捷键
- 模板切换器功能
- 等等
目前如何运作
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(); }); }
我在主 shell 中只定义了
baseViewModel.js
一次,然后在整个应用程序中访问它,如下所示:<tbody data-bind="foreach: { data: dataArr, afterAdd: showElement, beforeRemove: fadeRemove }">
或在 View 模型中:
Page1.load = function() { self.isLoading(true); // get data };
我尝试了什么
我研究了原型(prototype)继承并设法让它发挥作用,但我不确定我是如何实现它的。我在 baseViewModel.js
中创建了一个 Base
函数,并将其作为单例返回。然后在其中一个页面中,我做了:
define(['durandal/app', 'jquery', 'knockout', 'baseViewModel'], function (app, $, ko, base) {
var Page1 = function() {};
Page1.prototype = base;
return Page1;
});
在 Base 中声明的函数在 Page1 的 View 和 View 模型中工作得很好,但问题是我需要它们在与 Page1 一起加载的所有模块中工作。这包括:
- 第 1 组 shell View (有一个按钮可以激活 Base 中的功能)
- 主 shell View (根据 Base 内部可观察到的
isLoading
的值,加载条是否可见)
为了让这些工作正常,我必须定义文件并在每个 View 模型中应用相同的 *.prototype = base;
。
那么有没有更好的方法来处理继承呢?如果没有,有没有办法只声明一次基础并将其应用于所有子页面?
谢谢!
最佳答案
我将原型(prototype)继承与工厂方法结合使用,到目前为止它似乎运行良好。我只想要简单的继承,所以这不是像某些继承库那样的全功能继承方法。
正如 PW 所建议的,我确实将我的基本 View 模型包装在 requireJs 模块中。
这是一个简化的代码示例,但它应该是功能性的。如果它没有意义,请告诉我,我可以详细说明。
基础 View 模型
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;
}
};
});
派生 View 模型
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
关于javascript - 继承DurandalJS中的常用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19318640/