发布于 2015-09-06 14:46:08 | 387 次阅读 | 评论: 0 | 来源: 网络整理

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

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

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

1.初始结构

<div id="app"></div>

<script id="hello" type="text/regular" name="hello">
  Hello, Guest
</script>

<!-- 引入regular.js -->
<script src="https://rawgit.com/regularjs/regular/master/dist/regular.js"></script>


<script>
//利用Regular构建你的app吧
var HelloRegular = Regular.extend({
  template: '#hello'
});

// initialize component then $inject to #app's  bottom
var component = new HelloRegular({
  data: {username: "leeluolee"}
});
component.$inject('#app'); 
</script>

☞ 查看结果

  • 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}. <a href="javascript:;" on-click={username = ''}>Logout</a>
{#else}
  Sorry, Guest. Please <a href="javascript:;" on-click={this.login()}>Login</a>
{/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. 或许你对为什么数据变化会反应到视图差生疑惑, 推荐你阅读脏检查: 数据绑定的秘密
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务