alloy Model: 数据绑定(data binding) 1

refer to:  http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Data_Binding

data binding的定义:  当我们的controller中的数据发生了变化时,我们希望同步更新view 的显示页面,这个就叫data binding.  

Alloy, backbone都提供了 从Model/Collection到View的 数据绑定

(p.s. Angular 提供了 Model <=> View  的双向绑定) 

Collection => View的绑定

大部分的Titanium 组件都支持: 

一个 全局 Collection 标签的例子:

<Alloy>
  <Collection src='book' />  # 记得要放在 <Alloy> 标签下. 
  <Window>
    <TableView id='table' />
  </Window>
</Alloy>

# 在controller中调用 上面声明的 <Collection src='book' />
var books = Alloy.Collections.book
books.fetch()

一个 只对某个controller生效的 Collection (类似于局部变量)

<Alloy>
  <Collection src='book' id='my_books' instance='true'/>
  <Window>
    <TableView id='table' />
  </Window>
</Alloy>

# 然后,我们可以在controller中这么调用:
var my_books = $.my_books
my_books.fetch()

在上面的表格中列出来的Alloy XML中,可以插入如下属性(attribute) 

1. dataCollection: specifies the collection singleton or instance to bind to the table. This is the name of the model file for singletons or the ID prefixed with the controller symbol ('$') for instances.
2. （可选）dataTransform: specifies an optional callback to use to format model attributes. The passed argument is a model and the return value is a modified model as a JSON object.
3. （可选）dataFilter: specifies an optional callback to use to filter data in the collection. The passed argument is a collection and the return value is an array of models.
4. （可选）dataFunction (since Alloy 1.1): set to an arbitrary identifier (name) for a function call. Use this identifier to call a function in the controller to manually update the view. This is not a declared function in the controller. This attribute creates an alias to access the underlying binding function, which is part of the Alloy data-view binding framework.

对于任何使用了　data binding的页面，都要记得回收资源： $.destroy() 

例如：

$.win.addEventListener('close', function(){
  $.destroy();
});

具体的例子和步骤：

1. 有个Model, 比如 app/models/book.js，　有个属性叫　title. 

2. 有个view, 比如　app/views/book.xml

<Alloy>
  <Collection src='books' />
  <Window onClose='cleanup'>
    <Label> hihihi , another view</Label>
    <ScrollableView dataCollection='books'>
      <!--  这个View 就是　需要循环显示的　东东 -->
      <View layout='vertical'>
        <Label text="{title}" />
      </View>
    </ScrollableView>
  </Window>
</Alloy>

3. 有个controller, 比如  app/controllers/book.js

Alloy.Collections.books.fetch();

function cleanup(){
  $.destroy();
}