Back

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

发布时间: 2015-04-04 02:45:00

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 组件都支持: 

View Object

Since Alloy version

Add data binding attributes to...

Repeater Object to map
model attributes to view properties

ButtonBar

1.1

<Labels>

<Label/>

CoverFlowView

1.1

<Images>

<Image/>

ListView

1.2

<ListSection>

<ListItem/>

Map Module

1.4

<Module module="ti.map" method="createView">

<Annotation/>

Picker

1.5

<PickerColumn> or <Column>

<PickerRow/> or <Row/>

ScrollableView

1.1

<ScrollableView>

<View/>
May contain children view objects.

TableView

1.0

<TableView>

<TableViewRow/>
May contain children view objects.

TabbedBar

1.1

<Labels>

<Label/>

Toolbar

1.1

<Items>

<Item/>

View

1.0

<View>

Any view object except a top-level container
like a Window or TabGroup

一个 全局 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();
}

Back