Skip to content

Commit

Permalink
Merge pull request #1 from regularjs/master
Browse files Browse the repository at this point in the history
pull
  • Loading branch information
amibug committed Aug 27, 2015
2 parents 4be84d8 + af0fea3 commit 9cd2cae
Show file tree
Hide file tree
Showing 72 changed files with 3,709 additions and 4,990 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ coverage*
out/*


.DS_Store
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(The MIT License)

Copyright (c) 2012-2014 zheng haibo(leeluolee). and regular contributors
Copyright (c) 2012-2015 NetEase, Inc. and regularjs contributors.

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
Expand Down
118 changes: 79 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,25 @@
![regularjs](http://regularjs.github.io/image/regular-icon-100.png)
</a>

> <strong>After version 0.3.0: in Regularjs, the default TAG is changed from `{{}}` to the cleaner`{}`</strong>. However you can use `Regular.config({BEGIN:'{{', END: '}}'})` if the old syntax is needed.
# Regularjs


[![Build Status](http://img.shields.io/travis/regularjs/regular/master.svg?style=flat-square)](http://travis-ci.org/regularjs/regular)

> Regularjs is a __living template engine__ that helping us to create data-driven component.
> Regularjs is a __living template engine__ that helps us to create data-driven components.



## Features

- __String-based template__ make it flexible to build your component.
- __data-binding__ is based on dirty-check, angular experience also make sense to regularjs
- __self-contained and well encapsulation__, make it be easily integrated with other framework
- __composite component__ , using component as 'custom element'.
- __directive, filter, event and animation...__ all you need is provided out of box with __concise API__
- __String-based templates__ make it flexible to build your component;
- __data-binding__ based on dirty-check: the Angular-like experience also makes sense to regularjs;
- __self-contained and well-defined encapsulation__ makes it more easily integrated with other frameworks;
- __composite components__: components can be used as "custom elements";
- __directive, filter, event and animation...__ all you need is provided out of box with __concise API__.



Expand All @@ -29,8 +31,8 @@
```javascript
var Note = Regular.extend({
template:
"<input {{#if !disabled}} r-model='hello' {{#else}} disabled {{/if}} > {{hello}} \
<button on-click={{disabled = !disabled}}>{{disabled? 'active': 'disable'}} it</button>"
"<input {#if !disabled} r-model='hello' {#else} disabled {/if} > {hello} \
<button on-click={disabled = !disabled}>{disabled? 'active': 'disable'} it</button>"
})

// inject component into #app , you can also inject at 'before' , 'after', 'top'.
Expand All @@ -40,17 +42,17 @@ var note = new Note().$inject("#app");

__[Example1 on codepen.io](http://codepen.io/leeluolee/pen/JqAaH)__

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.
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 frameworks.


### Example 2: __define a List Component__

```javascript
var NoteList = Regular.extend({
template:
"<ul>{{#list notes as nt}}" +
"<li class={{nt.done? 'done': ''}} on-click={{nt.done= !nt.done}}>{{nt.content}}</li>" +
"{{/list}}</ul>"
"<ul>{#list notes as nt}" +
"<li class={nt.done? 'done': ''} on-click={nt.done= !nt.done}>{{nt.content}}</li>" +
"{/list}</ul>"
});

var list = new NoteList({
Expand All @@ -60,20 +62,20 @@ var list = new NoteList({

```

In this Example, we create a ListView by statement `list`.
In this Example, we create a ListView by the statement `list`.

__[Example2 on codepen.io](http://codepen.io/leeluolee/pen/mAKlL)__


### Example 3: combine Note with NoteList

we need refactor Note to make it composable.
we need to refactor Note to make it composable.

```javascript
var Note = Regular.extend({
name: 'note', // register component during the definition of Component
template:
"<input r-model={{draft}} on-enter={{this.post()}}>",
"<input r-model={draft}> <button on-click={this.post()}> post</button>",
post: function(){
var data = this.data;
this.$emit('post', data.draft);
Expand All @@ -85,17 +87,17 @@ var Note = Regular.extend({
Regular.component('list', NoteList); // manual register a component

```
when 'Enter' is pressed, we emit a 'post' event with the `draft` as the $event object.
When 'Enter' is pressed, we emit a 'post' event with the `draft` as the $event object.

> the `this` in template is pointing to the component self.
> The keyword `this` in the template points to the component itself.
then, define Core Component: NoteApp.
Then, define the core component: NoteApp.

```javascript
var NoteApp = Regular.extend({
template:
"<note on-post={{notes.push({ content: $event} )}}/>"+
"<list notes = {{notes}}></list>"
"<note on-post={notes.push({ content: $event} )}/>"+
"<list notes ={notes}></list>"
})

var noteapp = new NoteApp({
Expand All @@ -106,7 +108,7 @@ noteapp.$inject('#app');

```

you can register a component(via attribute `name` or method `Component.component`) to make them composable in other component.
you can register a component (via attribute `name` or method `Component.component`) to make it composable in other components.

__[Example3 on codepen.io](http://codepen.io/leeluolee/pen/bqkLp)__

Expand All @@ -115,45 +117,83 @@ See more on [Guide: Quirk Start](http://regularjs.github.io/guide/en/getting-sta

## Resources

* __[regular's Offcial Guide](http://regularjs.github.io/guide/)__(use gitbook)
* __[Offcial Site ](http://regularjs.github.io)__
* __[demo on codepen.io](http://codepen.io/search?q=regularjs&limit=all&depth=everything&show_forks=false)__
* __[Reference ](http://regularjs.github.io/reference)__


## Browser Compatibility

IE7+ and other modern browser.
IE7+ and other modern browsers.

## Community

* If you find bugs or have suggestion, please feel free to open [an issue](https://github.com/regularjs/regular/issues)
## installation

* Ask any questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/regularjs) with tag `regularjs`.
###bower

* Social
1. twitter: follow the [@regularjs](https://twitter.com/regularjs).
3. gitter: talk on [![Gitter chat](https://badges.gitter.im/regularjs/regular.png)](https://gitter.im/regularjs/regular)
2. weibo: [@拴萝卜的棍子](http://weibo.com/luobolee)
```javascript
bower install regularjs
```

## Contribute
`dist/regular.js` has been packaged as a standard UMD, and therefore you can use it in AMD, commonjs and global.

### npm (browserify or other based on commonjs)

__regularjs is still in heavily development__, helping us with feedback. there is some recommend to contributor.
```js
npm install regularjs
```

* Please [open issue](https://github.com/regularjs/regular/issues) before sending pull request,
* 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))
use

```js
var Regular = require('regularjs');
```

## Who are use ?

1. [NetEase](https://github.com/NetEase) : operator of famous [www.163.com](http://www.163.com).
### component

```
component install regularjs/regular
```
use

```js
var Regular = require('regularjs/regular');
```



## LICENSE
### Direct download

[MIT](https://github.com/regularjs/regular/blob/master/LICENSE).
1. [regular.js](https://rawgit.com/regularjs/regular/master/dist/regular.js)
2. [regular.min.js](https://rawgit.com/regularjs/regular/master/dist/regular.min.js)


## Who are using?

1. [NetEase](https://github.com/NetEase): the operator of the famous website [www.163.com](http://www.163.com).



## Community

* If you find bugs or have suggestions, please feel free to open [an issue](https://github.com/regularjs/regular/issues)

* Ask any questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/regularjs) with tag `regularjs`.

* Social
1. twitter: follow the [@regularjs](https://twitter.com/regularjs).
1. gitter: talk on [![Gitter chat](https://badges.gitter.im/regularjs/regular.png)](https://gitter.im/regularjs/regular)
1. weibo: [@拴萝卜的棍子](http://weibo.com/luobolee)

## Contribute

__regularjs is still in heavily development__, and please help us with feedback. Contributing to this project is also recommended.

* Please [open an issue](https://github.com/regularjs/regular/issues) before sending pull request,
* 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 a certain browser is not installed, list that in [gulpfile's karmaConfig](https://github.com/regularjs/regular/blob/master/gulpfile.js#L30))



## LICENSE

[MIT](https://github.com/regularjs/regular/blob/master/LICENSE).
3 changes: 2 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "regularjs",
"version": "0.2.12",
"version": "0.3.1",
"main": "dist/regular.js",
"description": "reactjs + angularjs = regularjs",
"authors": "@leeluolee <[email protected]>",
Expand All @@ -10,6 +10,7 @@
"node_modules",
"bin",
"test",
"example",
"gulpfile.js",
"*.json",
"*.md"
Expand Down
3 changes: 2 additions & 1 deletion component.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "regularjs",
"version": "0.2.12",
"version": "0.3.1",
"main": "src/index.js",
"scripts": [
"src/Regular.js",
Expand All @@ -22,6 +22,7 @@
"src/helper/animate.js",
"src/helper/combine.js",
"src/helper/entities.js",
"src/helper/filter.js",
"src/directive/base.js",
"src/directive/form.js",
"src/directive/animation.js",
Expand Down
Loading

0 comments on commit 9cd2cae

Please sign in to comment.