如何从Dojo声明性小部件访问本地变量

How to access local variable from Dojo declarative widget

本文关键字:访问 变量 小部 Dojo 声明      更新时间:2023-09-26

我在自定义小部件中有一个声明性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"

我该怎么做呢?

声明性小部件可以访问的唯一作用域是全局作用域,因为它位于全局作用域(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/