Trunk.Collection( [attributes] )

模型集合

var collection = new Trunk.Collection({
  // 集合的模型，默认为Trunk.Model
  Model: Trunk.Model.extend({
    prop: 1
  })
})

list

Array

模型集合数组

init

构造函数执行完毕前的接口，继承时不会覆盖父类的操作，定义Trunk.Collection.prototype.init则对所有collection有效

parse( data )

fetch后的数据到add前的转换，重写parse即可定义自己的转换逻辑

var collection = new Trunk.Collection({
  url: 'test.json' // {stores: [{id: 1}, {id: 2}, {id: 3}]}
  parse: function(data) {
    return data.stores
  }
})

length

获取集合模型的数量

add( data )

往集合中添加数据，如果是数组则添加多条，每条数据创建一个模型，所以单条数据类型必须为Object， 否则当成数组遍历成多个模型

remove( [model | models] )

从集合中删除模型，支持多个模型

toArray

集合转换成数组，各个数组元素即各个模型的data属性值

Trunk.Model( [attributes] )

模型类，主要进行数据处理，创建view时会自动创建model

var model = new Trunk.Model({
  url: 'test.json'
})
var view = new Trunk({
  model: model
})
// 推荐方式
var view = new Trunk({
  model: {
    url: 'test.json'
  }
})

init

构造函数执行完毕前的接口，继承时不会覆盖父类的操作，定义Trunk.Model.prototype.init则对所有model有效

parse( data )

数据到模版的转换，重写parse即可定义自己的转换逻辑

<div id="demo">
  <script type="text">
    <# data.stores.forEach(function(store) { #>
      <div><#- store.name  #></div>
    <# }) #>
  </script>
</div>

var demo = new Trunk({
  model: {
    parse: function(data) {
      return {
        stores: data
      }
    }
  },
  el: '#demo',
  template: 'script'
})
demo.model.reset([{name: '1'}, {name: '2'}])

set( data | key, [options] | value, [options] )

设置模型数据

// 单个
model.set('country', 'China')
// 多个
model.set({
  country: 'China'
  // ...
})
// 配置
model.set({
  country: 'China'
}, {
  safe: true, // 安全模式，存在validata方法但不进行数据验证（数据验证需要手动定义validate方法，返回布尔值）
  silent: true // 静默模式，不触发change事件
})

reset( [data] )

重置数据，触发reset事件并渲染视图

remove

删除模型并从集合中去除

after( [data] )

在当前模型后追加一个模型

index

获取当前模型在集合中的索引

prev

获取当前模型的前一个模型

next

获取当前模型的后一个模型

Trunk( [attributes] )

视图类，提供基础的视图操作，直接处理和反馈用户的操作

var view = new Trunk({
  el: 'body'
})

model

Object|Model

当前视图的模型属性或模型

// 实例化后app.model变成Model类的一个实例
var app = new Trunk({
  model: {
    init: function() {}
  }
})
// 本身就是模型的实例
var app = new Trunk({
  model: new Trunk.Model({
    init: function() {}
  })
})

el

jQuery|String

视图的DOM容器，支持jQuery对象或选择器

tag

String

视图的DOM容器HTML标签名称，实例化后会创建对应的jQuery对象

className

String

容器的className

init

构造函数执行完毕前的接口，继承时不会覆盖父类的操作，定义Trunk.prototype.init则对所有view有效

var view = new Trunk({
  init: function() {
    this.model.fetch()
  }
})

$( selector )

在当前view容器下查询子元素，与this.el.find等效

render

渲染模版，注入到容器中，model的reset事件触发后自动渲染，手动渲染前确保数据已经准备好

renderer

渲染核心处理方式，默认为模版渲染，如果采用其他非模版的方式（d3等），则需要重写

var view = new Trunk({
  renderer: function() {
    d3.select(this.el[0]).append('svg')
  }
})

template

String

模版选择器，如果不是ID选择器，则从当前容器中查找（确保容器存在于DOM中）

var list = new Trunk({
  el: '#list', // DOM中已存在
  template: '.template-list' // 从list元素中查找
})

ID选择器则从整个DOM中查找，容器是否存在不受影响

var Item = Trunk.extend({
  tag: 'li', // 创建的元素，DOM中不存在
  template: '#template-item'
})

setElement( el )

设置view容器，一般用于实例化的时候容器不存在DOM中，等容器存在后再绑定到view

remove

删除视图以及model

delegateEvents

绑定事件（this.events）到当前容器，采用事件委托方式

events

Object

DOM事件map，用法：'name selector': 'handle'，未指定el或tag属性则不会绑定事件

var view = new Trunk({
  events: {
    'click': 'onClick',
    'change select': 'onSelectChange'
  },
  onClick: function() {},
  onSelectChange: function() {}
})

ajax

ajax请求交互模块，服务端返回的数据格式必须是JSON， Trunk、Trunk.Model、Trunk.Collection的实例均可调用

setParam( param | key, [silent] | value, [silent] )

设置GET请求参数，如果参数值为空字符串或null或undefined，则删除当前参数

model.setParam({
  sort: 'id',
  sortType: null // 删除当前字段
})

param

Object

fetch数据的请求参数对象

fetch

发送ajax请求，向服务器fetch数据（GET请求）

url

String

fetch数据的URL

events

[type]

事件模型，提供事件注册和触发的观察机制，Trunk、Trunk.Model、Trunk.Collection的实例均可调用

on( name, handle, [context] )

监听自身自定义事件，如果不指定context参数，调用者即handle的this对象

model.on('save', function() {
  // this.do...
})

once

与on不同的是事件生命周期只有一次

off( [name], [handle] )

解除事件，也可解除指定的事件

// 解除所有事件
model.off()

listen

与on不同的是监听其他对象

view1.listen(model2, 'save', function() {
  // this.do...
})

listenOnce

与once不同的是监听其他对象

trigger( name, [parameter...] )

触发事件

view1.listen(view2, 'click', function(id) {
  // id: 99
})
view2.trigger('click', 99)

extend( attributes )

类继承机制

var List = Trunk.extend({})
List.Model = Trunk.Model.extend({})
var MyList = List.extend({})
MyList.Model = List.Model.extend({})

Trunk.template( str )

基于字符串的模版，转换模版字符串成一个可执行的函数，视图中传入template选择器自动获取、编译

var template = Trunk.template('<button><#- data.content #></button>')
console.log(template({content: 'click me'})) // <button>click me</button>

语法：<#- 表达式 #>；<# 语句 #>

global

String

模版中数据根命名空间，默认'data'，可自定义

leftTag

String

模版中左分隔符，默认'<#'，可自定义

rightTag

String

模版中右分隔符，默认'#>'，可自定义