Skip to content

Latest commit

 

History

History
200 lines (104 loc) · 3.67 KB

directive.md

File metadata and controls

200 lines (104 loc) · 3.67 KB

内置指令

Regular 提供少量常用指令解决语法能力的不足, 你也尝试实现自己的指令

on-[eventName] {#event}

绑定事件。

Example

on-click={expression}

<script async src="//jsfiddle.net/leeluolee/1o2gf4um/embed/js,result/"></script>

Arguments

Param Type Detail
expression Expression 每当指定事件触发，该表达式会被运行
$event 事件对象 请参考事件章节

事件系统完整指南请参考 入门:事件 章节

r-model {#r-model}

r-model 实现与表单类DOM元素的 双向绑定, 所以对应的表达式应该是 setable 的

Syntax

r-model={Expression}

Example

<script async src="//jsfiddle.net/leeluolee/4y25j/embed/html,result/"></script>

Type

  • input、textarea:

    • 绑定类型: String
    <textarea  r-model={blog.title}>hahah</textarea>
<input  r-model={input} />

  • input:checkbox:

    • 绑定类型: Boolean

    绑定[checked]属性，注意需要是

    <input type="checkbox" checked  r-model={checked}> Check me out (value: {checked})

  • input:radio:

    • 绑定类型: String

    可以绑定多个input:radio元素

    <input type="radio" value="option1" r-model={radio} >
<input type="radio" value="option2" r-model={radio} >

  • select:

    • 绑定类型: String

    绑定select的value值

    <!-- city = 1 -->
<select r-model={city}>
  <option value="1" selected>Hangzhou</option>
  <option value="2">Ningbo</option>
  <option value="3">Guangzhou</option>
</select>

双向绑定不总是 「银弹」，复杂的数据关系，你可以考虑使用value属性 + 表单事件监听的方式来解决

r-style

r-style={Expression} 是 style样式绑定的增强指令

Exmaple

new Regular({
  template: `
    <button class='btn' 
      on-click={left=left+10}
      r-style={ {left: left+'px'}}
      >left+10</button> left:  {left}`,
  data: {
    left: 1
  }
}).inject(document.body)
<script async src="//jsfiddle.net/leeluolee/aaWQ7/13/embed/js,result/"></script>

Arguments

Param Type Details
r-style expression Expression 求值结果应该是一个Object, 键是样式名，值是样式值 (注意Regular并不处理默认单位，请主动添加)

⚠️如果已经有 style 插值了，那r-style的将会被覆盖

例如 <div style='left: {left}px' r-style='{left: left+10+"px"}'></div>

r-class {#r-class}

与r-style 类型， 不过 r-class作用于 class 属性

Example

<div r-class={{"active": page === "home"}}></div>

上例中，如果page === 'home',则active会被添加到div节点的class属性中

Description

Param Type Details
r-class expression Expression 求值结果应该是一个Object, 键是class名，值是Boolean值

⚠️与r-style类似，如果已经存在一个 class 插值了， 那r-class的定义会被覆盖

r-hide {#r-hide}

控制节点的 display 样式

Exmaple

<div r-hide={page !== 'home'}></div>

如果page !== 'home'为真，则display:none样式会被添加到style中

r-html {#r-html}

即innerHTML插值，注意 XSS 攻击风险

Example

<textarea r-model='value'>Hello</textarea>
<h2>实时编辑</h2>
<div r-html='content' > </div>
<script async src="//jsfiddle.net/leeluolee/k91esf42/embed/js,result/"></script>

本例双向绑定参考r-model

r-animation

动画系统请参考动画章节