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

我正在基于dojox.mobile框架编写一个应用程序。我正在使用Dojo1.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(){
                     //...
            }
        })
    }
);

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(){
                     //...
            }
        })
    }
);

和一个View1.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(){
                     //...
            }
        })
    }
);

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"
        },
        //...
    }
    //...
}

mobile框架似乎不接受作为dojo类编写的视图控制器（通过declare）。

---

如何获得视图控制器的层次结构？

就像@tik27所说的，

dojox/app

可能是您的解决方案。但是，我们发现，

dojox/app

部分的文档缺少好的示例，因此为了降低其他人的学习曲线，我们制作了自己的小框架（用于使用IBM Worklight的

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
    });
});

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

因为我们在这里输入

content

属性，它将被放置在前面定义的

${！content}

的位置

---

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

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

我试图扩展与视图关联的控制器模块（请参阅下面配置中的AppControllers/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，它将包含自定义属性和方法。然后我可以编写扩展my/GenericView的SpecializedView：

my/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
        }
    });
});

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示例，这个jsfiddle by@Dimitri M

你有没有研究过dojox/app似乎就是你想要的。谢谢。你的回答为我指出了解决问题的正确方法！很棒：）我还做了一个完整的

dojox/mobile

示例。它没有继承太多（除了标题栏和scrollableview），但我想你明白了：我不知道如何处理这个问题的答案，但我已经在下面的答案中添加了你的JSFIDLE