Question

我正在编写一个基于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类的视图控制器（通过声明）。如何获得视图控制器的层次结构？

Answer 1

就像@ 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
    });
});

正如您所看到的，我们有一个带标题和页脚的标准模板，但我们也使用名为content的占位符。模板的一般部分（在这种情况下是页眉/页脚）可以放在这里。

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

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

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

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

Answer 2

事实证明，对我来说最好的解决方案是使用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 的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所以你可以通过@Dimitri M找到一个完整的dojox /移动示例这个jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/

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

2 个答案: