Dojo AMD : 필요 내에서 함수를 호출 할 수 없습니다.

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

  •  09-12-2019
  •  | 
  •  

문제

저는 Dojo 버전 1.7.2를 사용하여 새로운 응용 프로그램을 개발하기 시작했습니다. 기능을 위해 새로운 AMD 구문을 사용하기를 원했습니다. 불행히도 나는 그것을 얻는 것처럼 보이지 않는다. :-(

무엇이 가장 짜증나는 것입니다. 예를 들어, 오프닝에서 각 행에 여러 위젯이있는 동적 테이블을 만드는 페이지가 있습니다. 그런 다음 매번 하나의 빈 행을 추가하는 버튼이 있습니다.

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"을 다시 한 번 다시 연결합니까? 또는 전체 목록으로 모든 기능을 하나의 "요구"안에 넣으시겠습니까? 두 번째 방법을 수행하면 위젯 이벤트에서 이러한 기능을 호출 할 수 있습니까?

도움이 되었습니까?

해결책

The easiest way would be to define your own module. Take a look at this tutorial first:

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

Now define your own module, e.g. "./js/mymodules/mymodule.js" (relative to HTML page):

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
    }

});

And use your module like this:

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

다른 팁

Try this:

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

You can now call your functions from anywhere by using 

myFunctions.createNewRow();

If you don't want 'myFunctions', you could do

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

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

Paul Grime gave you a good example, so I'm just sharing some thoughts.

You don't define all the modules in each function, that's a huge waste of space. Although, even if you try to load a module multiple times, Dojo will only load it once anyway.

This is a simplified module from my latest project, with quite meaningless functionality:

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

Then I get the module by using

define(
[
    'my/app',
], 

function (app) 
{
    app.init();
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top