注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

dijit widgets:使用template创建widget  

2014-01-07 18:57:28|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

创建自己的dijit widget,一般情况下,我们需要继承dijit._WidgetBase 类,在buildRendering方法中创建自己的dom结构,但是当widget dom结构非常复杂的时候,这种方法显然是非常困难和复杂,庆幸的是,dijit为我们提供了 dijit._TemplatedMixin 让我们使用模板去创建dom结构,这中方式,非常易用和简单。事实上,大部分的dijit现有的widget,基本也是采用这种模板方式。

你可以随便打开一个dijit的widget,让我们看看它是如何工作的?

首先, TemplatedMixin 提供了templateString属性,可以将我们定义的template文件存入其中,这样它会使用它所实现buildRendering方法为我们建立Dom结构。

Template的写法,其实就是一段HTML片段。

其中有三种语法:

1.Variable Substitution

它作用是:将你类里面的成员变量的值,进行替换,语法如下:

${property}

${obj.property}

2.Attach Points

它的作用是:你可以通过this.方式快速拿到模板中的dom元素,语法如下:

<div class="${baseClass}Title" data-dojo-attach-point="titleNode"

            data-dojo-attach-event="ondijitclick:_onClick"></div>
this.titleNode.innerHTML = '... ...'

3.Event Attachments

它的作用是:  快速将你定义的事件,注册到模板上的dom元素,语法如下:

<div class="${baseClass}Title" data-dojo-attach-point="titleNode"

            data-dojo-attach-event="ondijitclick:_onClick"></div>
将类中定义的_onClick事件注册到div上

其他重要信息
1.在模板中定义的dom元素和注册的事件,我们是不需要关心它如何销毁的,因为它继承dijit._AttachMixin
会通过_detachTemplateNodes方法去销毁。
 
2.特殊的data-dojo-attach-point声明,有一个特殊的名称containerNode,如果你声明了它。
就会在你的进行声明式编程的时候,你的html标签中的子元素就会加载你的containerNode位置。
 

再来看看dijit/form/Button的模板Button.html,结合Button.js分析一下template的语法

<span class="dijit dijitReset dijitInline" role="presentation"
><span class="dijitReset dijitInline dijitButtonNode"
data-dojo-attach-event="ondijitclick:__onClick" role="presentation"
><span class="dijitReset dijitStretch dijitButtonContents"
data-dojo-attach-point="titleNode,focusNode"
role="button" aria-labelledby="${id}_label"
><span class="dijitReset dijitInline dijitIcon" data-dojo-attach-point="iconNode"></span
><span class="dijitReset dijitToggleButtonIconChar">&#x25CF;</span
><span class="dijitReset dijitInline dijitButtonText"
id="${id}_label"
data-dojo-attach-point="containerNode"
></span
></span
></span
><input ${!nameAttrSetting} type="${type}" value="${value}" class="dijitOffScreen"
data-dojo-attach-event="onclick:_onClick"
tabIndex="-1" role="presentation" data-dojo-attach-point="valueNode"
/></span>

有时候widget的模板中混入其他widget组件,这时候你需要在继承一个_WidgetsInTemplateMixin,就可以将其他widget加入到模板中,例如dijit/InlineEditBox

<span data-dojo-attach-point="editNode" role="presentation" class="dijitReset dijitInline dijitOffScreen"
><span data-dojo-attach-point="editorPlaceholder"></span
><span data-dojo-attach-point="buttonContainer"
><button data-dojo-type="./form/Button" data-dojo-props="label: '${buttonSave}', 'class': 'saveButton'"
data-dojo-attach-point="saveButton" data-dojo-attach-event="onClick:save"></button
><button data-dojo-type="./form/Button" data-dojo-props="label: '${buttonCancel}', 'class': 'cancelButton'"
data-dojo-attach-point="cancelButton" data-dojo-attach-event="onClick:cancel"></button
></span
></span>

注意widget上的attach point指的是最后生成的Button Widget实例,不是Dom元素。

参考资料:

http://dojotoolkit.org/documentation/tutorials/1.9/templated/

http://dojotoolkit.org/reference-guide/1.9/quickstart/writingWidgets.html#quickstart-writingwidgets

  评论这张
 
阅读(436)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017