如何为dojox.mobile视图编写可重用控制器代码

Question

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

考虑到每个视图都有一个控制器，我尝试创建一个父控制器(它是一个通过定义函数定义的模块)，然后尝试扩展它，但没有成功。

我要做的是创建一个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类编写的视图控制器(通过声明)。如何获得视图控制器的层次结构？

Answer 1

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

我试图扩展与视图关联的控制器模块(请参阅下面配置中的AppController/View1.js)，但该模块只是混合到视图中。如果我想得到视图的高级处理，我可以利用type属性(再次参见下面的config json摘录)。

config.json：

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

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

MyGenericView.js

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

my/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示例，以及@Dimitri的这个jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/。

Answer 2

正如@ Like 27所说，dojox/app可能是您的解决方案。但是，我们发现dojox/app部分的文档缺乏良好的示例，因此为了降低其他人的学习曲线，我们创建了自己的小框架(用于improves的dojox/mobile )，提高了可重用性。

我们实际上制作了一个“基本控制器”模块，使用如下模板扩展了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。