English
资源说明：Tiny reactive template engine
```
Text interpolation may appear anywhere within the copy, and may contain complex JavaScript expressions
for defaulting values or other operations.
```html
```
Reactive is smart enough to pick out multiple properties that may be used, and
react to any of their changes:
```html
```
## Declarative Bindings
By default reactive supplies bindings for setting properties, listening to events, toggling visibility, appending and replacing elements. Most of these start with "data-*" however this is not required.
### data-text
The `data-text` binding sets the text content of an element.
### data-html
The `data-html` binding sets the inner html of an element.
### data-<attr>
The `data-` bindings allows you to set an attribute:
```html
Download
```
### each
The `each` binding allows you to iterate a collection of objects within the model:
```html
` bindings allow you to listen on an event:
```html
x
```
`remove` is expected to be a method on the specified `delegate` object:
```js
var delegate = {
remove: function(ev) {
console.log('Removing thing!');
...
}
}
reactive(template, model, {
delegate: delegate
});
```
### data-append
The `data-append` binding allows you to append an existing element:
```html
```
The `histogram` property on the model is expected to contain a DOM element.
### data-replace
The `data-replace` binding allows you to replace an existing element, and carryover its attributes:
```html
```
The `histogram` property on the model is expected to contain a DOM element.
### data-{visible,hidden}
The `data-visible` and `data-hidden` bindings conditionally add "visible" or "hidden" classnames so that you may style an element as hidden or visible.
```html
```
`data-visible` will add a `visible` class if the property is `truthy`. For arrays, use the `.length` property to trigger on empty or non-empty arrays.
`data-hidden` is the opposite of visible and will add a `visibile` class if the value is false and `.hidden` class if the value is truthy.
### data-checked
Toggles checkbox state:
```html
```
### data-selected
Toggles option state:
```html
```
### Writing bindings
To author bindings, simply create a function that will accept two arguments, the element and binding value. For example, here is a binding which removes an element when truthy:
```js
function removeIf(el, property){
var binding = this;
binding.change(function() {
if (binding.value(property)) {
el.parentNode.removeChild(el);
}
});
};
var template = 'no name';
var view = reactive(template, { name: 'foobar' }, {
bindings: {
'remove-if': removeIf
}
});
```
Notice that you can call the binding whatever you want when you create your view allowing you to select appropriate names. Binding authors should recommend names that make sense.
Here is another binding which uses [momentjs](http://momentjs.com/) to pretty print a javascript date.
```js
var template = '';
var view = reactive(template, { timestamp: new Date() }, {
bindings: {
'moment': momentFormat
}
});
function momentFormat(el, property) {
var binding = this;
var format = el.getAttribute('format');
binding.change(function () {
var val = binding.value(property);
el.innerText = moment(val).format(format);
});
};
```
Would output the following html
```html
Mar 3rd 14
```
You can easily re-use such bindings by making them plugins and enabling them on your instance with `.use()`
## Interpolation
Some bindings such as `data-text` and `data-` support interpolation. These properties are automatically added to the subscription, and react to changes:
```html
```
## Notes
Get creative! There's a lot of application-specific logic that can be converted to declarative Reactive bindings. For example here's a naive "auto-submit" form binding:
```html
```
```js
var reactive = require('reactive');
var view = reactive(document.querySelector('.login'), {}, {
bindings: {
autosubmit: autosubmit
}
});
function autosubmit(el){
el.onsubmit = function(e){
e.preventDefault();
var path = el.getAttribute('action');
var method = el.getAttribute('method').toUpperCase();
console.log('submit to %s %s', method, path);
}
};
```
## View patterns
Typically a view object wraps a model to provide additional functionality, this may look something like the following:
```js
function UserView(user) {
this.user = user;
this.view = reactive(tmpl, user, {
delegate: this
});
}
UserView.prototype.clickme = function(ev){ ... }
```
Often a higher-level API is built on top of this pattern to keep things DRY but this is left to your application / other libraries.
For more examples view the ./examples directory.
### Run examples and tests
$ git clone https://github.com/component/reactive.git
$ cd reactive
$ npm i
$ make
$ open examples
$ make test
## License
MIT
# reactive [](https://travis-ci.org/component/reactive)
Simple and Flexible template and view binding engine with support for custom bindings and real-time updates on model changes.
## Installation
With component:
```
$ component install component/reactive
```
With npm via [browserify](http://browserify.org/):
```
$ npm install reactive
```
## Quickstart
Rendering a basic html template with a predefined data model.
```js
var view = reactive('Hello {name}!
', {
name: 'Adam'
});
// you can add the view "element" to the html whenever you want
// view.el contains the html element
document.body.appendChild(view.el);
```
```html
Hello Adam!
```
### Handling events
Reactive provides an easy way to register handlers for dom events via predefined "bindings".
```js
var handlers = {
clickme: function(ev) {
// console.log('button clicked');
}
};
var template = '';
var view = reactive(template, {}, {
delegate: handlers
});
```
A recommended approach is to wrap the `reactive` instance inside of your own *View* classes. See the [Views]() example.
### Iteration
Iteration is achieved by using the `each` binding on the element you wish to iterate.
```js
var template = '- {this}
- Sally
- Billy
- Sally
- Billy
- Eve
no items
' + '- {this}
{ name || 'Untitled' }
Summary: { body.slice(0, 10) }
Welcome { first + ' ' + last }.
``` Interpolation works for attributes as well, reacting to changes as you'd expect: ```html{filename}
- {name}
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
