Dojo AMD:Non è possibile chiamare una funzione all'interno di una richiedono

StackOverflow https://stackoverflow.com//questions/9626821

  •  09-12-2019
  •  | 
  •  

Domanda

Io sono davvero un novizio di dojo, ma come ho iniziato a sviluppare una nuova applicazione con dojo versione 1.7.2 volevo anche usare il nuovo AMD sintassi per le funzioni.Purtroppo non mi sembra di farlo.:-(

Ciò che mi infastidisce di più è che, semplicemente, non posso chiamare qualsiasi funzione che si trova all'interno di un "richiedono"-blocco.Io per esempio ho una pagina che in apertura crea una tabella dinamica con diversi widget in ogni riga.Poi ho un pulsante che aggiunge una riga vuota ogni volta che viene premuto.

Senza AMD sintassi sarebbe facile:
- mettere tutti i miei "dojo.require()" nella TESTA
- e quindi creare un sacco di mie funzioni per la creazione della tabella e widget
- aggiungi riga funzione può accedere facilmente a tutte le variabili di un mio precedente funzione riempito

Ma con AMD come questo:

Funzione iniziale crea la tabella e i widget: 

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

Ora il "Aggiungi Riga Vuota, il pulsante" chiama la sua funzione "addEmptyRow".
Ma in questa funzione devo:
- fare un altro richiedere per ogni dojo-modulo di nuovo
- NON è POSSIBILE utilizzare alcuna delle funzioni che sono "all'interno" della "fillReportTable"-funzione.Per esempio il "createNewRow"-funzione 

 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
}

Tutto questo sembra essere tanto complicato, con AMD.
O mi manca qualcosa di ovvio qui ?
Con AMD se è possibile separare il codice in un sacco di piccole funzioni, fare il "richiedono" all'interno di OGNI funzione di tutto di nuovo ?O si fa a mettere tutte le funzioni all'interno di una "richiedono" con l'elenco completo ?
Se la fate il secondo modo, come si chiamano queste funzioni dal widget eventi?

È stato utile?

Soluzione

Il modo più semplice sarebbe quello di definire il proprio modulo.Date un'occhiata a questo tutorial prima:

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

Ora definire il vostro modulo, ad es."./js/mymodules/mymodule.js" (relativa alla pagina 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
    }

});

E utilizzare il modulo come questo:

<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>

Altri suggerimenti

Prova questo:

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

Ora è possibile chiamare le funzioni da qualsiasi luogo utilizzando 

myFunctions.createNewRow();

Se non vuoi 'myFunctions', si potrebbe fare

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

    dojo.setObject('createNewRow', createNewRow);
});

Paolo Sporcizia ti ha dato un buon esempio, così sto solo condividendo alcune riflessioni.

Non definire tutti i moduli in ogni funzione, che è un enorme spreco di spazio.Anche se, anche se si tenta di caricare un modulo più volte, Dojo caricherà solo una volta, comunque.

Questo è un modulo semplificata dal mio ultimo progetto, con molto senso di funzionalità:

//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!');
            });
        }   
    }
}

Poi mi arriva il modulo con

define(
[
    'my/app',
], 

function (app) 
{
    app.init();
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top