# Quick Example

In this Page, we will create our first component —— HelloRegular . It is used to show an welcome message for people who login. if people aren't login yet, the component will prompt an window. For simplicity, only username is required during the login operation.

## 1. initialize template

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

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

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

<script>
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>


RESULT

• Regular.extend

Regular.extend will create a Component extended from Regular.

• template

a Component may need template to describe its structure.

• data

component's model, but it is just a Plain Object. the data passed to new Component and the data passed to Component.extend are merged.

• $inject(node[, direction]) it is an instance method,$inject the component to the position indicated by the parameter 'direction'.

• bottom[default option]: $injected as node's lastChild • top:$injected as node' s firstChild,
• after: $injected as node' s nextSibling, • before:$injected as node' s prevSibling,

## 2. Using interpolation to show user's name

This component only shows static message until now, we should make it living by using interpolation.

  Hello, {username}


RESULT

## 3. using if/else to show other message if the user is not logged in

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


it just like we use the other string-based template.

RESULT

## 4. Implement the Login/Logout by event

In this step , we need to add two event to deal with the Login and Logout operation.

{#if username}
{#else}
{/if}

##### Tips

in regular, the on- prefixed attribute will be considered as ui event you can also define your custom event like(e.g. on-hold or on-tap) and determine when to trigger it;

we add two operation in the template above:

Login: the keyword this in the template just point to the component itself. so we need to add a method named login at HelloRegular's prototype .

Logout: the model's root in template points to component.data . so in this exmaple, we just simply clear the username in component.data.

var HelloRegular = Regular.extend({
template: '#hello',
var data = this.data; // get data
}
});


RESULT

## 5. when the component's digest phase will be triggered

just like angular. regular's data-binding is based on dirty-check. some builtin (.e.g event, timeout) will tirgger the component's digest phase automatically. you can also trigger the digest manually using component.$update  component.data.user.name = "regularjs"; component.$update() // enter


just like the example above, the usage of $update is flexible. |DEMO| no matter how you use the $update. the component will always enter into the 'digest' phase.

## Summary

In this chapter, we create a super simple component named HelloRegular.

you can consider regular's component as a small mvvm realization.

• independent lifecycle
• the view based on template
• the model is Plain Object
• the component itself is just like the viewmodel

you can also check the more comprehensive example——todomvc.