javascript - Cómo escribir el código de los controladores reutilizables para las vistas de dojox.mobile

view controller

Question

Estoy escribiendo una aplicación basada en el framework dojox.mobile. Estoy usando dojo 1.9. Algunas vistas de la aplicación son muy similares y tienen muchas cosas en común, por lo que me gustaría crear una vista general y ampliarla para especializarla.

Dado que cada vista tiene un controlador, traté de crear un controlador principal (que es un módulo definido a través de la función de definición) y luego intenté extenderlo, pero sin éxito.

Lo que estoy haciendo es crear un GeneralController.js como el siguiente:

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

y un controlador View1.js como el siguiente:

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

y en config.json tengo:

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

El marco dojo.mobile parece no aceptar controladores de vista escritos como clase dojo (a través de declare). ¿Cómo puedo obtener una jerarquía de controladores de vista?

Answer 1

Como dijo @ tik27, dojox/app podría ser tu solución. Sin embargo, encontramos que la documentación de la sección dojox/app carecía de buenos ejemplos, por lo que para reducir la curva de aprendizaje para otras personas, creamos nuestro propio marco pequeño (para dojox/mobile con IBM Worklight) que mejora la reutilización.

De hecho, hicimos un módulo de "controlador base", extendiendo dojox/mobile/View usando una plantilla como esta:

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

Como puede ver, tenemos una plantilla estándar con un encabezado y un pie de página, pero también utilizamos un marcador de posición llamado content . La parte general de la plantilla (en este caso, ese encabezado / pie de página) puede poner aquí.

Los módulos de vista / controlador que extienden este controlador base se ven así:

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

Como ingresamos aquí la propiedad de content , se colocará en la posición del ${!content} que definimos anteriormente.

Si no necesita usar widgets en su plantilla, también puede elegir dijit/_WidgetsInTemplateMixin

Answer 2

Resulta que la mejor solución para mí es usar dojox / app, como lo sugiere @ tik27.

Estaba intentando ampliar el módulo de controlador asociado a la vista (ver AppControllers / View1.js en la configuración a continuación) pero ese módulo simplemente se mezcla con la Vista. Si quiero obtener un manejo con clase de las Vistas, puedo aprovechar la propiedad type (ver de nuevo el extracto de config json a continuación).

config.json:

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

Para hacer esto, simplemente tengo que extender dojox / app / View en my my / GenericView, que contendrá propiedades y métodos personalizados. Luego puedo escribir SpecializedViews extendiendo my / GenericView :

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

De todos modos, el título de esta pregunta se refiere a dojox / mobile para que pueda encontrar un ejemplo completo de dojox / mobile il jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/ by @Dimitri M