你好，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>
说明
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", "")
}