Dojo AMD: невозможно вызвать функцию внутри запроса - PullRequest
Новая
       18

Dojo AMD: невозможно вызвать функцию внутри запроса

13 голосов
/ 09 марта 2012

Я действительно новичок в dojo, но, когда я начал разрабатывать новое приложение с версией dojo 1.7.2, я также хотел использовать новый синтаксис AMD для функций.К сожалению, я не понимаю этого.:-(

Что меня больше всего раздражает, так это то, что я не могу просто вызвать любую функцию, которая находится внутри блока «require». Например, у меня есть страница, которая при открытии создает динамическую таблицу с несколькими виджетамив каждой строке. Затем у меня есть кнопка, которая добавляет одну пустую строку при каждом нажатии.

Без синтаксиса AMD было бы легко:
- поместить все мои «dojo.require ()» в ГОЛОВУ
- и затем создать набор моих собственных функций для создания таблицы и виджетов
- функция добавления строки может легко получить доступ к любым глобальным переменным, которые моя предыдущая функция заполнила

Но с AMD это так:

Исходная функция создает таблицу и виджеты: 

function fillReportTable(repId) {
require(["dojo/dom-construct", "dojo/dom-attr", "dijit/form/FilteringSelect",
"dojo/data/ItemFileReadStore", "dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/Select", "dojo/store/Memory"],
     function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {
   // a lot of code to create the table, consisting of SEVERAL functions 
   function createNewRow(tbl) { ...} 
   function function1 () {... } 
   function function2 () {... } 
   function function3 () {... } 
}

Теперь кнопка «Добавить пустую строку» вызывает свою собственную функцию «addEmptyRow».
Но в этой функции мне нужно:
- выполнить другое требование для каждого модуля dojo снова
- Я не могу использовать любую из функций, которые находятся "внутри" функции "fillReportTable". Например, функция "createNewRow" 

 function addEmptyRow() {
require(["dojo/dom-construct", "dojo/dom-attr", "dijit/form/FilteringSelect",
"dojo/data/ItemFileReadStore", "dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/Select", "dojo/store/Memory"],
     function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {
// a lot of code to create the table, consisting of SEVERAL functions
}

Все это кажется очень сложным с AMD.
Или я здесь упускаю что-то очевидное?
С AMD, если вы разделяете свой код на множество мелких функций, выполняете ли вы «требование» внутри КАЖДОГОснова и снова функционировать?Или вы помещаете все функции в один «require» с полным списком?
Если вы делаете это вторым способом, как вы можете вызывать эти функции из событий виджета?

Ответы [ 3 ]

11 голосов
/ 09 марта 2012

Самый простой способ - определить свой собственный модуль.Сначала взгляните на этот учебник:

http://dojotoolkit.org/documentation/tutorials/1.7/modules/

Теперь определите свой собственный модуль, например, "./js/mymodules/mymodule.js" (относительно HTML-страницы): 

define([
    "dojo/dom-construct",
    "dojo/dom-attr",
    "dijit/form/FilteringSelect",
    "dojo/data/ItemFileReadStore",
    "dijit/form/ComboBox",
    "dijit/form/DateTextBox",
    "dijit/form/Select",
    "dojo/store/Memory"
], function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {

    function fillReportTable(repId) {
       // a lot of code to create the table, consisting of SEVERAL functions 
       function createNewRow(tbl) { ...} 
       function function1 () {... } 
       function function2 () {... } 
       function function3 () {... } 
    }

    function addEmptyRow() {
       // a lot of code to create the table, consisting of SEVERAL functions
    }

    // Return an object that exposes two functions
    return {
        fillReportTable: fillReportTable,
        addEmptyRow: addEmptyRow
    }

});

И используйте свой модуль так: 

<html>

<head>

<script>
var dojoConfig = {
    baseUrl: "./js/",
    packages: [
        { name: "dojo", location: "lib/dojo" },
        { name: "dijit", location: "lib/dijit" },
        { name: "dojox", location: "lib/dojox" }
    ]
};
</script>

<script data-dojo-config="async: true" src="js/lib/dojo/dojo.js"></script>

</head>

...

<script>
require([
    "mymodules/mymodule"
], function (mymodule) {
    mymodule.fillReportTable(...);
    mymodule.addEmptyRow(...);
});
</script>
4 голосов
/ 09 марта 2012

Попробуйте это: 

require([...], function() {
    var myFunctions = dojo.getObject('myFunctions', true);
    myFunctions.createNewRow = function(...) {
        ...
    };
});

Теперь вы можете вызывать свои функции из любого места, используя 

myFunctions.createNewRow();

Если вы не хотите «myFunctions», вы можете сделать 

require([...], function() {
    var createNewRow = function(...) {};

    dojo.setObject('createNewRow', createNewRow);
});
3 голосов
/ 10 марта 2012

Пол Грайм привел вам хороший пример, поэтому я просто делюсь некоторыми мыслями.

Вы не определяете все модули в каждой функции, это огромная трата пространства.Хотя, даже если вы попытаетесь загрузить модуль несколько раз, Dojo все равно загрузит его только один раз.

Это упрощенный модуль из моего последнего проекта с совершенно бессмысленной функциональностью: 

//app module in 'my' folder

define(
[
    'app/elements',
    'dojo/query',
    'dojo/on',
    'dojo/fx',
    'dojo/_base/fx',
    'dojo/dom-construct',
    'dojo/_base/event'

    //and so on.....
], 

function(elements, q, on, fx, baseFx, constr, event)
{   
    return {

        init : function()
        {
            var node = q(elements.loading);
            this.removeNode(node);

            this.addEvents();
        },

        removeNode : function(node)
        {
            node.remove();
        },

        addEvents : function()
        {
            $(elements.buttons).on('click', function(e)
            {
                alert(q(e).attr('id') + ' was clicked!');
            });
        }   
    }
}

Затем я получаю модуль с помощью 

define(
[
    'my/app',
], 

function (app) 
{
    app.init();
}
...