# 使用 Reactive addon

**required: Roof 0.2.0**

Reactie addon 是用来创建 **反射型** 数据的。反射型数据指的是：能自动跟随源数据变化而变化的数据。任何 Roof 的 Node 或 Nodes 实例都可以作为源数据。

## 使用 Reactive addon

在使用前，我们要载入 reactive addon:

```javascript
var Roof = require('roof')
require('roof/addon/reactive')
```

然后我们先正常创建一个数据当做源数据:

```javascript
var Todos = Nodes.createClass()
var todos = new Todos([{
    content : 'sing',
    creator : 'Snow'
},{
    content : 'dance',
    creator : 'Arya'
},{
    content : 'fight',
    creator : 'Arya'
}])
```

下面我们来创建一个 反射型 数据来表示上面 todos 实例中的所有 creator:

```javascript
var Creators = Nodes.createClass()
var creators = todos.rxTransform(function(){
    //this 指向 todos
    var creators = []
    this.forEach(function(todo){
        if( creators.indexOf(todo.get('creator')) === -1){
            creators.push({
                name: todo.get('creator')
            })
        }
    })
    return new Creators(creators)
})

console.log( creators.length ) //2

```

这样，我们就能得到一个 包含所有 creator 名字的 Creators 实例。并且它会自动根据源数据变化而变化。例如:

```javascript
todos.insert({content:'play', creator:'Brandon'})

//creators自动变化
console.log(creators.length) //3
```

有时一个反射型数据会依赖于多个源数据，那么我们只要把依赖的源数据作为参数继续传给 rxTransform 就好了

```javascript
var Family = Node.createClass()
var family = new Family({name:'Stark'})

var Creators = Nodes.createClass()
var creators = todos.rxTransform(function(){
    //this 指向 todos
    var creators = []
    this.forEach(function(todo){
        if( creators.indexOf(todo.get('creator')) === -1){
            creators.push({
                name: family.get('name') + '.' + todo.get('creator')
            })
        }
    })
    return new Creators(creators)

}, family) //这里传入依赖

console.log( creators.length ) //2
console.log( creators.get(0).get('name') ) //Stark.Snow

family.set('name','Targerian')
//跟随family 自动变化
console.log( creators.get(0).get('name') ) //Targerian.Snow
```