你好,Regular

我们即将实现一个简单的登录组件:HelloRegular

1. 初始结构

<!-- 容器节点 -->
<div id="app"></div>

<!-- 引入Regular (生产环境请使用安装版本) -->
<script src="https://cdn.jsdelivr.net/npm/regularjs"></script>


<script>
//利用Regular构建你的app吧
const HelloRegular = Regular.extend({
  template: `
    Hello, {username}
  `
});

// initialize component then $inject to #app's  bottom
const component = new HelloRegular({
  data: {
    username: 'leeluolee'
  }
});

component.$inject('#app'); 

</script>

See the Pen HelloRegular by leeluolee (@leeluolee) on CodePen.

说明

  • Regular.extend(definition)

    创建一个继承自 Regular 的组件, definition 对象的属性会成为此组件的 原型属性。

  • template

    这个范例模板中使用了 {} 插值语法

  • data

    组件实例的初始化数据可以通过data属性传入。

  • $inject(node[, direction])

    实例方法$inject可以将组件插入到目标节点的指定位置

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

2. 使用条件展示

接下来我们在模板中使用if/else语句处理未登录的情况

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

3. 绑定事件处理逻辑

直接在节点上声明 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事件触发。会将传入的表达式运行一次

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

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

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


login: function(){
  var data = this.data; // get data
  data.username = prompt("please enter your username", "")
}

4. 下一步阅读

  1. 我们直接从 Regular 中最重要的概念 - 组件开始吧
  2. 如果你对数据如何驱动视图变更的,也可以查看数据监听章节

results matching ""

    No results matching ""