这一小节,我们将实现一个简单的组件—— HelloRegular ,它用来显示友好的用户欢迎语,但是如果用户未登录的话需要提示进行登录信息,为了简单起见只需要输入用户名就可以进行登录.

经过本节学习, 你将会了解:

  1. 如何初始化regularjs页面
  2. 使用插值
  3. 使用逻辑(if/else)来切换显示
  4. 使用on-xx事件绑定.

1.初始结构

  

☞ 查看结果

  • Regular.extend

    Regular.extend用来创建一个继承自Regular的组件类,所有传入extend的属性都会成为此组件类的原型属性

  • template

    一般来讲一个组件会需要一个模板来描述组件的结构,这里我们传入包含模板的容器节点的选择器(你也可以直接传入模板字符串)

  • data

    组件component可能需要一些初始化状态,这些数据我们可以在实例化组件时作为data传入。

    需要注意的是在实例化组件传入的参数会被作为实例属性, 所以可以在这里覆盖extend的定义(原型属性)

  • $inject(node[, direction])

    这是个组件的实例方法,会将组件插入到目标节点制定位置

    • bottom[默认参数]: 作为node的 lastChild插入
    • top: 作为node的firstChild 插入
    • after: 作为node的nextSibling插入
    • before: 作为previousSibling插入

2.显示用户姓名——插值

目前为止,这个组件仅仅只是显示了一个静态信息,我们在模板中简单添加一个插值来显示用户信息, 需要注意的是regularjs的内建模板是'活动'的,如果你更新了数据状态, ui将会自动更新。

    Hello, {username}  

☞ 查看结果

3. 处理未登录的情况——if/else逻辑控制

接下来我们处理未登录的用户情况

  {#if username}    Hello, {username}.  {#else}    Sorry, Guest.  {/if}  

就与常规的字符串模板(例如jst)类似,模板里我们添加if/else来区分登录用户与游客的显示效果

☞ 查看结果

4. 实现用户登录登出的功能—— on-click

这里同时我们添加了两个click事件来处理用户的登录与登出逻辑,

  {#if username}    Hello, {username}. Logout  {#else}    Sorry, Guest. Please Login  {/if}  

tips:

regular中 on-开头的属性会被作为事件绑定处理,每当对应的ui事件触发. 会将传入的表达式运行一次(与angular的事件系统类似). 你可以通过Regular.event来扩展自定义ui事件,例如on-tap这种dom中并不原生支持的事件

这里我们添加了两个用户操作:

登出: 由于regular的表达式支持赋值操作,这里的登出我们仅仅是对username做了清空处理。

登录: 模板中的this对象指向实例component本身,我们需要在extend时添加一个原型方法login来处理登录逻辑

  var HelloRegular = Regular.extend({    template: '#hello',    login: function(){      var data = this.data; // get data      data.username = prompt("please enter your username", "")    }  });  

☞ 查看结果

小节

虽然这个例子非常简单, 但是基本上实现一个组件的思路大同小异

  1. 根据需求得到静态html结构, 并将其模板化, 并结合Regular.extend将其封装成一个组件.
  2. 根据业务需求添加dom事件并添加对应的组件原型方法(如上例的login)
  3. 如果需要你还可能将部分可重用功能拆分为子组件

下一步阅读

  1. 或许你对为什么数据变化会反应到视图差生疑惑, 推荐你阅读脏检查: 数据绑定的秘密
221阅读 | 0评论
你的回应
联系我们