data-dojo-id, dijit/registry.byId() and dojo/dom.byId()

前端之家收集整理的这篇文章主要介绍了data-dojo-id, dijit/registry.byId() and dojo/dom.byId()前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

registry.byIddom.byId经常混淆,尤其是初次使用者。

registry.byId应当用于: 当你想直接引用某个部件的JavaScript对象以及访问这个部件的方法时。

dom.byId 应当用于:当你想直接访问一个DOM节点。

下面这个ContentPane部件有一个id属性(标准HTML属性)以及一个data-dojo-id属性(dojo 特有id属性):

<div id="myDivId"
     data-dojo-type="dijit/layout/ContentPane"
     data-dojo-id="myDojoId">
   Hello Everyone!
</div>

dom.byId()

dom.byId()和我们经常使用的document.getElementById()在访问DOM节点的div标签时没有区别: 都是通过标签的id属性值。

例如:

dom.byId("myDivId").style.height = '300px';

用来设置高度。

registry.byId()

registry.byId() 有一点不同。首先,用data-dojo-type声明的节点或者dojo编程实现的部件被dojo解析后才能使用registry.byId()。这时,id作为一个参数,返回值是一个对象,这个对象当data-dojo-type被解析转换成dijit部件时由dojo创建。这样,你就可以改变部件的dojo属性,或者调用其中定义的方法(在这个例子里,我们能调用ContentPane的方法)。例如,通过set(“content”,value)方法,设置ContentPane内容

registry.byId("myDivId").set("content", "Hello World!");

你也可以像上面我们使用dom.byId() 那样改变其样式,通过ContentPane的domNode属性。 (事实上,domNode定义的比继承树高,所以每个dijit部件都有domNode。非常方便!例如

myContentPane = registry.byId("myDivId");
myContentPane.domNode.style.height = '300px';
myContentPane.set("content", "Hello World!");

data-dojo-id (dojo 1.6之前是jsId)

HTML 属性data-dojo-id通过自动创建一个全局JavaScript变量,节省你在使用过程中的很多步骤(这是由dojo parser实现的)。这个变量包含的对象和registry.byId()返回的对象相同。无论你给data-dojo-id这个属性什么值,都会变为全局变量名,所以,要当心保留字,还要当心两个部件使用相同data-dojo-id!既然Content Pane有一个data-dojo-id 属性值“myDojoId”,那么我可以稍微简化一下上面的代码,移除registry.byId(),使用data-dojo-id属性作为变量名:

myDojoId.domNode.style.height = '300px';
myDojoId.set("content", "Hello World!");

属性data-dojo-id不是必须,在这里只是为了使用方便。

注意:如果有两个相同data-dojo-id,那么起作用的是最后那个,而不是返回一个包含这两个部件的数组。所以要避免相同,否则会很难发现错误

猜你在找的Dojo相关文章