zpin-templates

基本语法

• 任何有效的HTML（包括注释）都是模板(不要把注释直接写在模板里)
• {}里可以写js代码

内置指令：

rt-if

这允许您向HTML的子树添加条件。 如果条件求值为true，则返回子树; 否则，不会计算。 它被实现为三元表达式。 例子：

 <div rt-if="this.data.resultCode === 200">Success!</div>

当resultCode等于200时会显示Success!，否则不显示

rt-repeat

对数组中的每个项重复一个DOM节点及其子树。 语法是rt-repeat =“itemVar，arrayExpr中的indexVar”，其中元素itemVar将在JavaScript上下文中可用，并且将创建一个itemVarIndex来表示项目的索引。 通过使用这种命名方案，重复的表达式可以访问所有级别的嵌套。 也可以使用语法rt-repeat =“itemVar，arrayExpr中的indexVar”声明自定义索引变量，在这种情况下，索引变量将是indexVar。 例子：

<div rt-repeat="myNum in this.data.MyNumbers">{myNumIndex}. {myNum}</div>

MyNumbers是一个数组，这里将遍历所有的MyNumbers，myNumIndex是数组的索引，myNum是数组元素

rt-virtual

这个指令会创建一个虚拟节点，它并不会渲染成真实的DOM，但仍可用作指令的根，例如。 rt-if和rt-repeat。 例如 要立即重复几个节点，而不是为每个实例共享根：

<ul>
  <rt-virtual rt-repeat="n in [1,2,3]">
    <li>{n}</li>
    <li>{n*2}</li>
  </rt-virtual>
</ul>

这里每次循环都会给出两个li标签

rt-scope

此指令通过创建一个新方法并使用当前上下文调用它来创建一个新的JavaScript作用域。 语法是rt-scope =“expr1 as var1; expr2 as var2。这允许一个方便的速记，使代码更可读，它还有助于每个范围只执行一次表达式。 例子

<div rt-repeat="rpt in array">
    <div rt-scope="')' as separator; rpt.val as val">{rptIndex}{separator} {val}</div>
    <div>'rpt' exists here, but not 'separator' and 'val'</div>
</div>

这里调用把')'看做separator，rpt.val看做val，rt-scope这个作用域里，调用val就是调用rpt.val 后续表达式可以引用前面的变量，因为生成的代码将每个别名声明为var（与函数参数相反，函数参数仅在求值之后才绑定到形式参数名称），因此可以执行类似于

<div rt-scope="users[userId] as user; user.profile as profile; profile.avatar as avatar;">

当与rt-if一起使用时，rt-if条件首先被求值，并且仅当它是真实的，才处理rt-scope映射。 这意味着你可以这样写

<div rt-if="user.profile" rt-scope="user.profile.image as image">

这避免了去使用一个未定义的字段，否则你就要这样写user.profile && user.profile.image as image,这种写法是相当丑陋的 当与rt-repeat一起使用时，会为每次迭代计算rt-scope，以便iterations项和itemIndex在作用域中。

rt-props

rt-props用于以编程方式将属性注入元素。 它将合并属性与模板中接收的属性。 此选项允许您基于外部逻辑构建属性并将它们传递到模板。 在将组件上设置的属性传递给模板中的元素时，它也很有用。 此属性的期望值是返回对象的表达式。 键将是属性名，值将是属性值。 例如：

<input style="height:10px;width:3px;" rt-props="{style:{width:'5px'},type:'text'}"/>

这里style属性将会做merge，最终得出的结果是height:10px;width:5px; 而input的类型将是text

rt-class

要在编程设置类名时减少样板代码，可以使用rt-class伪指令。 它期望一个JSON对象，其中键作为类名称，布尔值作为值。 如果值为true，将包括类名称。 请注意以下事项： 1.如果在同一个HTML元素上同时使用class和rt-class，它们将被合并。 例子：

<div rt-scope="{blue: true, selected: this.isSelected()} as classes">
    These are logically equivalent
    <div rt-class="classes">Reference</div>
    <div rt-class="{blue: true, selected: this.isSelected()}">Inline</div>
    <div class="blue{this.isSelected() ? ' selected' : ''}">Using the class attribute</div>
</div>

rt-include

（可选）选择从rt文件中提取静态内容。 rt-include是一个“宏”，它接受一个文本文件（例如svg / html / xml）并将其注入文件，就像它是原始标记的一部分。 例子： 主模板

<div>
  <rt-include src="./my-icon.svg" />
</div>

my-icon.svg模板

<svg xmlns="http://www.w3.org/2000/svg">
  <rect height="50" width="50" style="fill: #00f"/>
</svg>

等效于：

<div>
  <svg xmlns="http://www.w3.org/2000/svg">
      <rect height="50" width="50" style="fill: #00f"/>
  </svg>
</div>

事件绑定

事件处理程序通过对浏览器原生事件跨浏览器的封装，使事件处理能够跨浏览器兼容，所以以下的事件都不是浏览器原生事件，注意区别

剪贴板事件

• onCopy 该事件在用户拷贝元素内容时触发
• onCut 该事件在用户剪切元素内容时触发
• onPaste 该事件在用户粘贴元素内容时触发

键盘事件

• onKeyDown 某个键盘按键被按下。
• onKeyPress 某个键盘按键被按下并松开。
• onKeyUp 某个键盘按键被松开。

焦点事件

• onFocus 元素获取焦点时触发
• onBlur 元素失去焦点时触发

表单事件

• onChange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>,和 <textarea>)
• onInput 元素获取用户输入时触发
• onSubmit 表单提交时触发

鼠标事件

• onClick 当用户点击某个对象时调用的事件句柄。
• onContextMenu 在用户点击鼠标右键打开上下文菜单时触发
• onDoubleClick 当用户双击某个对象时调用的事件句柄。
• onMouseDown 鼠标按钮被按下。
• onMouseEnter 当鼠标指针移动到元素上时触发。
• onMouseLeave 当鼠标指针移出元素时触发
• onMouseMove 鼠标被移动。
• onMouseOut 鼠标从某元素移开。
• onMouseOver 鼠标移到某元素之上。
• onMouseUp 鼠标按键被松开。

拖动事件

• onDrag 该事件在元素正在拖动时触发
• onDragEnd 该事件在用户完成元素的拖动时触发
• onDragEnter 该事件在拖动的元素进入放置目标时触发
• onDragExit
• onDragLeave 该事件在拖动元素离开放置目标时触发
• onDragOver 该事件在拖动元素在放置目标上时触发
• onDragStart 该事件在用户开始拖动元素时触发
• onDrop 该事件在拖动元素放置在目标区域时触发

选择事件

• onSelect

触控事件

• onTouchCancel
• onTouchEnd
• onTouchMove
• onTouchStart

UI事件

• onScroll 当文档被滚动时发生的事件。

滚轮事件

• onWheel 该事件在鼠标滚轮在元素上下滚动时触发

多媒体事件

• onAbort
• onCanPlay
• onCanPlayThrough
• onDurationChange
• onEmptied
• onEncrypted
• onEnded
• onError
• onLoadedData
• onLoadedMetadata
• onLoadStart
• onPause
• onPlay
• onPlaying
• onProgress
• onRateChange
• onSeeked
• onSeeking
• onStalled
• onSuspend
• onTimeUpdate
• onVolumeChange
• onWaiting

图片事件

• onLoad 一幅图像完成加载。
• onError 在加载文档或图像时发生错误

动画事件

• onAnimationStart 该事件在 CSS 动画开始播放时触发
• onAnimationEnd 该事件在 CSS 动画结束播放时触发
• onAnimationIteration 该事件在 CSS 动画重复播放时触发

两种方式去注册事件，一个是onClick =“{this.myClickHandler}”。 当不需要函数时，可以使用lambda表示法，lambda表示法的形式为：onClick =“（evt）=> console.log（evt）”。 在此示例中，evt是传递到内联函数的第一个参数的名称。但是，如果你期望一个以onSomething开头的属性，那么模板会将其视为事件处理程序。 如果你有一个名为onBoxSelected的事件处理程序触发一个行和列参数的事件，你可以写入onBoxSelected =“（row，col）=> this.doSomething（row，col）”。 还支持无参数版本：onClick =“（）=> console.log（'只是想知道它点击'）”。 例如：

<div rt-repeat="item in items">
    <div onClick="()=>this.itemSelected(item)" onMouseDown="{this.mouseDownHandler}">
</div>