如何从Dojo声明小部件访问局部变量

时间:2014-07-30 22:04:09

标签: javascript dojo

我在自定义小部件中有一个声明式Dijit日历,我想从data-dojo-props内部访问非全局变量,而不是需要引用全局变量。

myWidgetTemplate.html:

<div class="${baseClass}" data-dojo-attach-point="wrapperNode">

    <div data-dojo-type="dijit/Calendar" 
        data-dojo-attach-point="calWidget" 
        id="myCalendar" 
        data-dojo-props="isDisabledDate: myIsDisabledDate"></div>

</div>

我无法访问myIsDisabledDate,除非它在全球范围内,这是......不太理想。我可以将我的本地方法放在我的包含小部件中,并使用模板字段插入它:

data-dojo-props="isDisabledDate: ${myIsDisabledDate}"

但这只能起作用,因为我碰巧在这里使用了一个小部件模板。是否可以从页面中的声明性窗口小部件引用另一个模块中的变量/函数?我希望能够做到这样的事情:

data-dojo-props="isDisabledDate: uiModule.myIsDisabledDate"

我该怎么做?

1 个答案:

答案 0 :(得分:0)

声明性窗口小部件可以访问的唯一范围是全局范围,因为它位于全局范围(DOM)上。您需要的所有其他模块通常位于require()块内,该块具有自己的范围。

因此,从声明小部件中的另一个模块访问属性的唯一方法是将该模块添加到全局范围。

编程

例如:

define("uiModule", {
    title: "Some title"    
});

require(["uiModule", "dijit/form/Button", "dojo/parser"], function(uiModule) {
    window.uiModule = uiModule;   
});

然后你可以这样做:

<button data-dojo-type="dijit/form/Button"
  data-dojo-props="label: uiModule.title"></button>

声明

或者你可以通过使用声明性标记来缩短它:

<button data-dojo-type="dijit/form/Button"
    data-dojo-props="label: uiModule.title">

    <script type="dojo/require">
        uiModule: "uiModule"
    </script>
</button>

这仍然意味着uiModule仍然被添加到全局范围。但是,如果您创建声明性窗口小部件,则该实例始终可在全局范围内使用,例如,如果您创建ID为btn的按钮,则可以使用window.btn访问该实例。您可以使用该功能将uiModule添加到按钮本身,例如:

<button data-dojo-type="dijit/form/Button"
    data-dojo-props="label: btn.uiModule.title" id="btn">

    <script type="dojo/require">
      "btn.uiModule": "uiModule"
    </script>

我将这三个例子组合成一个演示它们的小提琴:http://jsfiddle.net/cey4e/