数据绑定

drunk的模板是基于DOM的模板，编译模板是在模板创建为DOM元素之后，所以本质上数据绑定是建立在元素与数据之间，而不同于字符串模板根据业务逻辑来生成HTML字符串然后再创建为DOM。

drunk和Angular的绑定语法差不多，使用过Angular的同学应该不会陌生

插值绑定

文本节点

使用双大括号形式{{ }}进行文本节点的插值。

<span>Message: {{ message }}</span>

每次挂载的drunk.Component实例上的对应的message的值变化时对应的文本节点的值也会更新。

标签上的attribute

<div style="height: {{ containerHeight }}px;"></div>

元素中的attribute的值包含插值写法也会创建绑定，当挂载的drunk.Component实例的containerHeight变化时会更新该元素的style的height值。

插值表达式

js表达式

<div style="display:{{ visible ? 'block' : 'none' }}"></div>
<div>SUM: {{a + b}}</div>
<span>{{ content.slice(0, 140) }}</span>

过滤器

<!-- 一个过滤器 -->
<span>{{ data |json }}</span>

<!-- 过滤器带参数 -->
<span>{{ createTime |date:'yyyy-MM-dd hh:mm:ss'}}</span>

<!-- 多个过滤器带多个参数 -->
<span>{{ user.nickName |default:'匿名用户' |truncate:4,'...'}}</span>

指令绑定

一个HTML标签上的带有drunk-（或通过drunk.config.prefix = 'xxx-'设置的值）前缀的attribute会被当成一个创建绑定的指令解析（如果存在），attribute的值会作为绑定表达式解析，与前面介绍的插值表达式使用方法相同。

• -attr="object"
• -attr:name="string|object"

<div drunk-show="visible"></div>
<div drunk-attr="{style: 'display:' + visible ? 'block': 'none'}"></div>

上面的2种写法效果相同，也等同于下面的插值表达式的写法

<div style="display: {{visible ? 'block' : 'none'}}"></div>
<div drunk-attr:style="{display: visible ? 'block' : 'none', color: 'red'}"></div>

HTML标签上的attribute都可以通过-attr:name方式绑定：

<img drunk-attr:src="imgUrl" >
<a drunk-attr:href="redirectUrl">xxxx</a>