1 | <a href="http://regularjs.github.io">
|
2 | ![regularjs](http://regularjs.github.io/image/regular-icon-100.png)
|
3 | </a>
|
4 |
|
5 | # Regularjs
|
6 |
|
7 |
|
8 | [![Build Status](http://img.shields.io/travis/regularjs/regular/master.svg?style=flat-square)](http://travis-ci.org/regularjs/regular)
|
9 |
|
10 | > Regularjs is a __living template engine__ that helping us to create data-driven component.
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | ## Features
|
16 |
|
17 | - __String-based template__ make it flexible to build your component.
|
18 | - __data-binding__ is based on dirty-check, angular experience also make sense to regularjs
|
19 | - __self-contained and well encapsulation__, make it be easily integrated with other framework
|
20 | - __composite component__ , using component as 'custom element'.
|
21 | - __directive, filter, event and animation...__ all you need is provided out of box with __concise API__
|
22 |
|
23 |
|
24 |
|
25 | ## Quirk Start
|
26 |
|
27 | ### Example 1: __define a simple Note Component__
|
28 |
|
29 | ```javascript
|
30 | var Note = Regular.extend({
|
31 | template:
|
32 | "<input {{#if !disabled}} r-model='hello' {{#else}} disabled {{/if}} > {{hello}} \
|
33 | <button on-click={{disabled = !disabled}}>{{disabled? 'active': 'disable'}} it</button>"
|
34 | })
|
35 |
|
36 | // inject component into #app , you can also inject at 'before' , 'after', 'top'.
|
37 | var note = new Note().$inject("#app");
|
38 |
|
39 | ```
|
40 |
|
41 | __[Example1 on codepen.io](http://codepen.io/leeluolee/pen/JqAaH)__
|
42 |
|
43 | the Example is dead simple, but you can find the directive and attribute is easily switched by statement 'if'. which is difficult with other mvvm framework.
|
44 |
|
45 |
|
46 | ### Example 2: __define a List Component__
|
47 |
|
48 | ```javascript
|
49 | var NoteList = Regular.extend({
|
50 | template:
|
51 | "<ul>{{#list notes as nt}}" +
|
52 | "<li class={{nt.done? 'done': ''}} on-click={{nt.done= !nt.done}}>{{nt.content}}</li>" +
|
53 | "{{/list}}</ul>"
|
54 | });
|
55 |
|
56 | var list = new NoteList({
|
57 | data: {notes: [{content: 'playgame'}, {content: 'homework'}]}
|
58 | }).$inject("#app");
|
59 |
|
60 |
|
61 | ```
|
62 |
|
63 | In this Example, we create a ListView by statement `list`.
|
64 |
|
65 | __[Example2 on codepen.io](http://codepen.io/leeluolee/pen/mAKlL)__
|
66 |
|
67 |
|
68 | ### Example 3: combine Note with NoteList
|
69 |
|
70 | we need refactor Note to make it composable.
|
71 |
|
72 | ```javascript
|
73 | var Note = Regular.extend({
|
74 | name: 'note', // register component during the definition of Component
|
75 | template:
|
76 | "<input r-model={{draft}} on-enter={{this.post()}}>",
|
77 | post: function(){
|
78 | var data = this.data;
|
79 | this.$emit('post', data.draft);
|
80 | data.draft = ""; //clear the draft
|
81 | }
|
82 |
|
83 | });
|
84 |
|
85 | Regular.component('list', NoteList); // manual register a component
|
86 |
|
87 | ```
|
88 | when 'Enter' is pressed, we emit a 'post' event with the `draft` as the $event object.
|
89 |
|
90 | > the `this` in template is pointing to the component self.
|
91 |
|
92 | then, define Core Component: NoteApp.
|
93 |
|
94 | ```javascript
|
95 | var NoteApp = Regular.extend({
|
96 | template:
|
97 | "<note on-post={{notes.push({ content: $event} )}}/>"+
|
98 | "<list notes = {{notes}}></list>"
|
99 | })
|
100 |
|
101 | var noteapp = new NoteApp({
|
102 | data: {notes:[] }
|
103 | });
|
104 |
|
105 | noteapp.$inject('#app');
|
106 |
|
107 | ```
|
108 |
|
109 | you can register a component(via attribute `name` or method `Component.component`) to make them composable in other component.
|
110 |
|
111 | __[Example3 on codepen.io](http://codepen.io/leeluolee/pen/bqkLp)__
|
112 |
|
113 |
|
114 | See more on [Guide: Quirk Start](http://regularjs.github.io/guide/en/getting-start/README.html)
|
115 |
|
116 | ## Resources
|
117 |
|
118 | * __[regular's Offcial Guide](http://regularjs.github.io/guide/)__(use gitbook)
|
119 | * __[Offcial Site ](http://regularjs.github.io)__
|
120 | * __[demo on codepen.io](http://codepen.io/search?q=regularjs&limit=all&depth=everything&show_forks=false)__
|
121 |
|
122 |
|
123 | ## Browser Compatibility
|
124 |
|
125 | IE7+ and other modern browser.
|
126 |
|
127 | ## Community
|
128 |
|
129 | * If you find bugs or have suggestion, please feel free to open [an issue](https://github.com/regularjs/regular/issues)
|
130 |
|
131 | * Ask any questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/regularjs) with tag `regularjs`.
|
132 |
|
133 | * Social
|
134 | 1. twitter: follow the [@regularjs](https://twitter.com/regularjs).
|
135 | 3. gitter: talk on [![Gitter chat](https://badges.gitter.im/regularjs/regular.png)](https://gitter.im/regularjs/regular)
|
136 | 2. weibo: [@拴萝卜的棍子](http://weibo.com/luobolee)
|
137 |
|
138 | ## Contribute
|
139 |
|
140 | __regularjs is still in heavily development__, helping us with feedback. there is some recommend to contributor.
|
141 |
|
142 | * Please [open issue](https://github.com/regularjs/regular/issues) before sending pull request,
|
143 | * if needed, add your testcase at `test/specs` folder. always make sure the `gulp test` is passed, and the `test/runner/index.html` is passed in every target browser (if you doesn't have some browser installed that list in [gulpfile's karmaConfig](https://github.com/regularjs/regular/blob/master/gulpfile.js#L30))
|
144 |
|
145 |
|
146 | ## Who are use ?
|
147 |
|
148 | 1. [NetEase](https://github.com/NetEase) : operator of famous [www.163.com](http://www.163.com).
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 | ## LICENSE
|
155 |
|
156 | [MIT](https://github.com/regularjs/regular/blob/master/LICENSE).
|
157 |
|
158 |
|
159 |
|