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

星期五

明天不上班

 
 
 

日志

 
 
关于我

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

网易考拉推荐

dijit widgets中的getter和setter方法  

2014-01-06 21:18:48|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
getter和setter方法
_WidgetBase类,为我们定义的属性提供了默认的getter和setter方法。

但是有时候我们需要自定义getter和setter方法

第一种,将属性Map到template上
以dijit的TitlePane为例,看看getter和setter方法的写法。

// title: String
// Title of the pane
title: "",
_setTitleAttr: { node: "titleNode", type: "innerHTML" }, // override default where title becomes a hover tooltip

TitlePane定义了一个title属性,它的set方法将title的值设置到模板中的titleNode元素的innerHTML中

<div data-dojo-attach-event="ondijitclick:_onTitleClick, onkeydown:_onTitleKey"
class="dijitTitlePaneTitle" data-dojo-attach-point="titleBarNode" id="${id}_titleBarNode">
<div class="dijitTitlePaneTitleFocus" data-dojo-attach-point="focusNode">
<span data-dojo-attach-point="arrowNode" class="dijitInline dijitArrowNode" role="presentation"></span
><span data-dojo-attach-point="arrowNodeInner" class="dijitArrowNodeInner"></span
><span data-dojo-attach-point="titleNode" class="dijitTitlePaneTextNode"></span>
</div>
</div>

在代码中我们就可以使用titlePane.set("title", "This is a title");对其进行设置

再看看dijit/form/Button:

// iconClass: String
//Class to apply to DOMNode in button to make it display an icon
iconClass: "dijitNoIcon",
_setIconClassAttr: { node: "iconNode", type: "class" },

Button中定义了一个iconClass属性,set方法会将其设置到iconNode的元素的class属性上

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

其他例子

_setImgAttr: {node: "imageNode", type: "attribute", attribute: "src" }
_setDisabledAttr: {node: "focusNode", type: "attribute" }


第二,添加自己的逻辑在setter和getter方法中
继续以dijit/form/Button为例: 为showLabel属性的set方法加入自己的逻辑

_setShowLabelAttr: function(val){
if(this.containerNode){
domClass.toggle(this.containerNode, "dijitDisplayNone", !val);
}
this._set("showLabel", val); //调用默认的方法将属性的value存储起来
},


其他资料:
_WidgetBase中关于setter和getter的注释:(非常重要)

// Widgets can provide custom setters/getters for widget attributes, which are called automatically by set(name, value).
// For an attribute XXX, define methods _setXXXAttr() and/or _getXXXAttr().
//
// _setXXXAttr can also be a string/hash/array mapping from a widget attribute XXX to the widget's DOMNodes:
//
// - DOM node attribute
// | _setFocusAttr: {node: "focusNode", type: "attribute"}
// | _setFocusAttr: "focusNode" (shorthand)
// | _setFocusAttr: "" (shorthand, maps to this.domNode)
// Maps this.focus to this.focusNode.focus, or (last example) this.domNode.focus
//
// - DOM node innerHTML
//| _setTitleAttr: { node: "titleNode", type: "innerHTML" }
// Maps this.title to this.titleNode.innerHTML
//
// - DOM node innerText
//| _setTitleAttr: { node: "titleNode", type: "innerText" }
// Maps this.title to this.titleNode.innerText
//
// - DOM node CSS class
// | _setMyClassAttr: { node: "domNode", type: "class" }
// Maps this.myClass to this.domNode.className
//
// If the value of _setXXXAttr is an array, then each element in the array matches one of the
// formats of the above list.
//
// If the custom setter is null, no action is performed other than saving the new value
// in the widget (in this).
//
// If no custom setter is defined for an attribute, then it will be copied
// to this.focusNode (if the widget defines a focusNode), or this.domNode otherwise.
// That's only done though for attributes that match DOMNode attributes (title,
// alt, aria-labelledby, etc.)

参考资料:
http://dojotoolkit.org/documentation/tutorials/1.9/understanding_widgetbase/
http://dojotoolkit.org/reference-guide/1.9/quickstart/writingWidgets.html#quickstart-writingwidgets
  评论这张
 
阅读(457)| 评论(0)
推荐

历史上的今天

评论

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

页脚

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