0

我正在编写一个基于 dojox.mobile 框架的应用程序。我正在使用dojo 1.9。该应用程序的某些视图非常相似，并且有很多共同点，因此我想创建一个通用视图并将其扩展为专门化它。

鉴于每个视图都有一个控制器，我尝试创建一个父控制器（这是通过 define 函数定义的模块），然后尝试扩展它，但没有成功。

我正在做的是创建一个 GeneralController.js，如下所示：

define(["dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/on"], 
    function(declare,lang, on){
        return declare("AppControllers/GeneralController",[],{
            init: function(){
                     //do something in GeneralController
            },

            beforeActivate: function(){
                     //...
            }
        })
    }
);

和一个 View1.js 控制器，如下所示：

define(["dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/on",
        "AppControllers/GeneralController"], 
    function(declare,lang, on, general){
        return declare(general,{
            init: function(){
                     //do something in this View1.js controller
                     this.inherited();//do what was in general
            },

            beforeActivate: function(){
                     //...
            }
        })
    }
);

在 config.json 我有：

{
    //...
    "views":{
        //...
        "View1":{
           "template":"AppTemplates/View1.html",
           "controller":"AppControllers/View1.js"
        },
        //...
    }
    //...
}

dojo.mobile 框架似乎不接受编写为 dojo 类的视图控制器（通过声明）。如何获得视图控制器的层次结构？

4

2 回答 2

1

就像@tik27 说的，dojox/app可能是你的解决方案。但是，我们发现该dojox/app部分的文档缺乏好的示例，因此为了降低其他人的学习曲线，我们制作了自己的小框架（用于dojox/mobileIBM Worklight），以提高可重用性。

dojox/mobile/View我们实际上制作了一个“基本控制器”模块，使用这样的模板进行扩展：

define([
    "dojo/_base/declare",
    "dojox/mobile/View",
    "dijit/_TemplatedMixin"
], function(declare, View, TemplatedMixin) {
    return declare([View, TemplatedMixin], {
        templateString: "<header>My header</header> ${!content} <footer>footer</footer>", 
        content: null // Default content
    });
});

如您所见，我们有一个带有页眉和页脚的标准模板，但我们也使用了一个名为content. 您可以将模板的一般部分（在本例中为页眉/页脚）放在这里。

扩展此基本控制器的视图/控制器模块如下所示：

define([
    "dojo/_base/declare",
    "./ControllerMixin"
], function(declare, ControllerMixin) {
    return declare([ControllerMixin], {
        content: "This is the content"
    });
});

因为我们在content这里输入属性，所以会放在${!content}我们之前定义的位置。

如果您需要在模板中使用小部件，您也可以选择dijit/_WidgetsInTemplateMixin

于 2013-12-20T08:46:57.727 回答
0

事实证明，对我来说最好的解决方案是使用 dojox/app，正如@tik27 所建议的那样。

我试图扩展与视图关联的控制器模块（请参阅下面配置中的AppControllers/View1.js），但该模块只是混合到视图中。如果我想对视图进行优雅的处理，我可以利用type属性（再次参见下面的配置 json 摘录）。

配置.json：

{
    //...
    "views":{
        //...
        "View1":{
           "template":"AppTemplates/View1.html",
           "controller":"AppControllers/View1.js"
           "type":"my/SpecializedView.js"
        },
        //...
    }
    //...
}

为此，我必须在my/GenericView中简单地扩展dojox/app/View ，其中将包含自定义属性和方法。然后我可以编写扩展my/GenericView 的 SpecializedViews：

我的/GenericView.js

define([
    "dojo/_base/declare",
    "dojox/app/View"
], function(declare, View) {
    return declare("my/GenericView",[View], {
        customProp: "example", // Default content
        customMethod:function(){
            //do something
        }
    });
});

我的/SpecializedView.js

define([
    "dojo/_base/declare",
    "my/GenericView"
], function(declare, GenericView) {
    return declare(GenericView, {
        init:function(){
            console.log(this.customProp);//will print "example"
        }
        customMethod:function(){
            this.inherited(arguments);//recall parent class' method
            //extend parent class' method
        }
    });
});

无论如何，这个问题的标题是指 dojox/mobile 所以你可以找到一个完整的 dojox/mobile 示例 il this jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/ by @Dimitri M

于 2013-12-20T14:41:25.100 回答