dagger.js:你要控制你自己(控制指令)

前情提要:dagger.js: 近水楼台先得月(作用域嵌套)

大家好,我是Tony。上一篇咱们讲过了如何使用生命周期指令+load创建作用域,以及通过事件处理指令+click绑定用户点击事件,这一篇来说说dagger.js的最后一种指令类型:控制指令

控制指令通常用于将作用域数据映射为DOM元素的attribute,根据数据绑定方式不同又分为单向控制指令和双向控制指令两种。

来看一个控制指令示例:

<div +load="{
  a: 1,
  b: 2,
  c: 4,
  d: 0
}" *watch#1="c = a + b" *watch#2="d = 2 * c">
  <label>a:<input type="number" *value="a"></label>
  <label>b:<input type="number" *value="b"></label>
  <br>
  <span>${ c } = ${ a } + (${ b })</span>
  <br>
  <span>${ d } = 2 * (${ c })</span>
  <br/>
  <button +click="a = 1, b = 2">reset</button>
</div>

上面的例子里,两个input标签和变量a/b通过双向控制指令*value建立了双向数据绑定关系,当用户修改input框中的内容时,将触发监听指令*watch执行,重新计算变量c和d的结果并更新到span标签当中。

在这里例子里我们还看到,指令表达式中可以使用a代替$scope.a,二者的效果是一样的,推荐使用简写方式,代码更加简洁。

可以通过官方文档了解更多控制指令的使用方式。

如果对dagger.js感兴趣的话,请您点赞收藏、分享本系列文章,也欢迎评论或者私信作者提出问题和建议。您的关注是对我最大的支持和鼓励。感谢您的阅读,祝工作学习顺利!

本文示例地址

注:本教程中的示例代码使用即将release的dagger-1.0.0-RC分支版本语法编写,与官网文档略有不同。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值