Как написать повторно используемый код контроллеров для представлений dojox.mobile

Пишу приложение на основе dojox.mobile framework. Я использую додзё 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 (с помощью объявления). Как я могу получить иерархию контроллеров представления?


javascript controller view dojo dojox.mobile
person Origama    schedule 19.12.2013    source источник
comment
вы заглянули в dojox/app, похоже, это то, что вы хотите.   -  person tik27    schedule 19.12.2013

Ответы (2)


arrow_upward
1
arrow_downward

Как сказал @tik27, dojox/app может быть вашим решением. Однако мы обнаружили, что в документации раздела dojox/app не хватает хороших примеров, поэтому, чтобы снизить кривую обучения для других людей, мы создали собственную небольшую структуру (для dojox/mobile с IBM Worklight), которая улучшает повторное использование.

На самом деле мы создали модуль «базового контроллера», расширив 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

person g00glen00b    schedule 20.12.2013
comment
Спасибо. Ваш ответ указал мне правильный путь решения проблемы! - person Origama; 20.12.2013
comment
Отлично :) Я также сделал полный dojox/mobile пример. Он мало что наследует (кроме заголовка и прокручиваемого представления), но я думаю, вы поняли: jsfiddle. нетто/g00glen00b/5PCrb - person g00glen00b; 20.12.2013
comment
Я не знаю, как обработать ответ на этот вопрос, но я добавил ваш jsfiddle к ответу ниже stackoverflow.com/a/ 20706052/1085383 - person Origama; 20.12.2013

arrow_upward
0
arrow_downward

Оказывается, лучшее решение для меня — использовать dojox/app, как предложил @tik27.

Я пытался расширить модуль контроллера, связанный с представлением (см. AppControllers/View1.js в конфигурации ниже), но этот модуль просто смешивается с представлением. Если я хочу получить классную обработку представлений, я могу использовать свойство type (см. еще раз отрывок config json ниже).

конфиг.json:

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

Для этого мне нужно просто расширить dojox/app/View в моем my/GenericView, который будет содержать пользовательские свойства и методы. Затем я могу написать SpecializedViews, расширяющие my/GenericView:

мой/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 в этом jsfiddle http://jsfiddle.net/g00glen00b/5PCrb/ @Dimitri M

person Origama    schedule 20.12.2013