使用Durandal时查看模型继承 [英] View Model inheritance when using Durandal

问题描述

我正在使用Durandal构建应用程序，并且需要在视图模型之间共享一些功能。

I am building an application using Durandal and I have the need to share some functionality across view models.

我要构建5个屏幕，它们实际上都是相同的屏幕，除了在activate函数中，它们将调用不同的api端点，但否则视图的视图模型将相同。

I have 5 screens to build and they are all virtually the same screen except that in the activate function they will call to a different api end points but otherwise the view and view models will be identical.

是否存在我应该使用的模式会遵循以下正确结构以促进代码重用吗？

Is there a pattern that I should be following to structure this correctly to promote code reuse?

推荐答案

如果视图和视图模型相同，只是调用了不同的api动作，将参数作为路径的一部分怎么办？然后，在激活功能中，可以打开参数。可以指定路由值，以便您的网址相关，例如[ http：// site / page / subtype] ，其中子类型是参数（而不是使用数值）

If the views and the view models are identical except for calling different api actions, what about just taking in a parameter as part of the route? Then in the activate function, you can switch on the parameter. The route values can be designated so that your url is relevant, like [http://site/page/subtype], where subtype is the parameter (instead of using numeric values)

关于继承，根据所需的功能，有很多方法可以进行JavaScript继承有点混乱。库提供了一些功能齐全的继承模型，例如base2和Prototype。 John Resig也具有我成功使用的继承模型。

Regarding inheritance, depending on the features you need, there's so many ways to do JavaScript inheritance it can be a little confusing. There are some full-featured inheritance models provided by libraries such as base2 and Prototype. John Resig also has an inheritance model that I've used successfully.

通常，在涉及JS继承时，我倾向于坚持使用更简单的解决方案。如果您几乎需要全套继承功能，则可以考虑使用这些库。如果您只在乎从基类访问一组属性和函数，则可以将视图模型定义为一个函数，然后用所需的基类替换该函数的原型。请参考 Mozilla的开发人员文档以获取有关继承的良好信息。

In general, I prefer to stick to simpler solutions when it comes to JS inheritance. If you need a pretty much the full set of inheritance features, those libraries are good to consider. If you only really care about accessing a set of properties and functions from a base class, you might be able to get by with just defining the view model as a function, and replacing the function's prototype with the desired base class. Refer to Mozilla's Developer Docs for good info on inheritance.

以下是示例：

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

    function _ctor() {

        var baseProperty = "Hello from base";
        function baseFunction() {
            console.log("Hello from base function");
        }
        //exports
        this.baseProperty = baseProperty;
        this.baseFunction = baseFunction;
    };

    //return an instance of the view model (singleton)
    return new _ctor();
});

//view model that inherits from viewModelBase
define(function (require) {
    "use strict";

    function _ctor() {

        var property1 = "my property value";
        function activate() {
            //add start up logic here, and return true, false, or a promise()
            return true;
        }
        //exports
        this.activate = activate;
        this.property1 = property1;
    };

    //set the "base"
    var _base = require("viewModelBase");
    _ctor.prototype = _base;
    _ctor.prototype.constructor = _ctor;

    //return an instance of the view model (singleton)
    return new _ctor();
});

请记住此示例，所有结果实际上都是单例（即，您只会得到同一实例，无论您有多少遍require（）

Keep in mind this example all results in what effectively is a singleton (i.e. you'll only get the same instance, no matter how many times you require() it)

如果您想要一个瞬态（非单例），只需返回_ctor即可。然后，您需要在require（）之后实例化一个新实例。

If you want a transient (non-singleton) just return _ctor. Then you'll need to instantiate a new instance after you require() it.

通常需要注意的一点是，函数应在原型上定义，而不是在原型内定义。构造函数本身。请参阅此链接以获取有关原因的更多信息。由于此示例仅产生一个实例，因此尚无定论，因此这些函数位于构造函数内部，以提高可读性，并具有访问私有var和函数的能力。

One more note, in general, functions should be defined on the prototype, not within the constructor function itself. See this link for more information on why. Because this example results in only a single instance, it's a moot point, so the functions are inside the constructor for improved readability and also the ability to access the private vars and functions.

这篇关于使用Durandal时查看模型继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！