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

Posted 2023-02-16

【中文标题】如何为 dojox.mobile 视图编写可重用的控制器代码

【英文标题】：How to write reusable controllers code for dojox.mobile views

【发布时间】：2013-12-19 16:41:41

【问题描述】：

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

【问题讨论】：

你看过dojox/app似乎是你想要的。

【参考方案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

【讨论】：

谢谢。您的回答为我指明了解决问题的正确方法！

太棒了 :) 我还做了一个完整的 dojox/mobile 示例。它没有继承太多（标题栏和可滚动视图除外），但我想你明白了：jsfiddle.net/g00glen00b/5PCrb

我不知道如何处理这个问题的答案，但我已将你的 jsfiddle 添加到下面的答案***.com/a/20706052/1085383

【参考方案2】：

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

我试图扩展与视图关联的控制器模块（请参阅下面配置中的 AppControllers/View1.js），但该模块只是混合到视图中。 如果我想对视图进行优雅的处理，我可以利用 type 属性（再次参见下面的配置 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 所以你可以找到一个完整的 dojox/mobile 示例 il this jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/ by @Dimitri M