cartons

Installation

npm install --save cartons

Documentation

• API
  • Model
  • Collection
  • connect
  • key-creators
    • randomCreator
    • incrementCreator
• Usage with react

API

Model

构建一个自己的model

Usage

import Model from 'cartons/model';
 
class CustomModel extends Model {
  static key; // key生成函数 默认使用 key-creators.incrementCreator
  static initialAttributes = { test: 1 }; // 每次实例初始化的属性
 
  // attributes set 前的 hook
  modelWillUpdate () {}
 
  // attributes set 后的 hook
  modelDidUpdate () {}
}

Static Attributes

• [initialAttributes] {Object|Function} - 建议Function 设置为Function时，将会把返回值作为初始化的属性
• key - key生成函数 默认使用

Hooks

• modelWillUpdate {Function(prevAttributes, nextAttributes)} - 调用了set, 但还没有执行set 操作时，此时 this.get(attributeName) === prevAttributes.get(attributeName)
• modelDidUpdate {Function(prevAttributes, nextAttributes)} - 调用了set, set执行成功, 此时 this.get(attributeName) === nextAttributes.get(attributeName)

Arguments

• [attributes] 初始化属性 会和 static initialAttributes合并

Method

实例化后可以通过 get,set对属性进行读写

var m = new CustomModel();
m.get('test') // 1
m.set({ test: 2 })
m.get('test') // 2
 
var m = new CustomModel({ test: 3 });
m.get('test') // 3

Collection

对Model集合的一层包装, 同时会自动监听所有子Model的update事件

import Collection from 'cartons/collection';
class CustomCollection extends Collection {
  static Model = CustomModel;
  static key;
  static initialAttributes = { test: 1 };
 
  // hook: before update children (includes remove, add)
  collectionWillUpdateChildren () {}
  // hook: after update children (includes remove, add)
  collectionDidUpdateChildren () {}
}
 
// new CustomCollection([initialAttributes], [initialAttributes[]]);
var collection = new CustomCollection(
  { attr2: 2 }
)

Static Attributes

• key - 和model相同
• [initialAttributes] - 和model相同
• [Model] - 用于自动生成子元素的构造函数

Hooks

• model的所有hooks
• collectionDidUpdateChildren {Function(prevChildren: Array, nextChildren: Array)} - 添加/删除子元素之前触发
• collectionDidAddChild {Function(prevChildren: Array, nextChildren: Array)} - 添加/删除子元素成功后触发

Arguments

• [initialAttributes] 同Model的initialAttributes

Method

• 可以使用Array的各种方法 已支持forEach, map, reduce, reduceRight, slice, filter, find, findIndex, some, every, includes, indexOf

    collection.forEach((item) => {
      console.log(item.get('attr3'))
    })
    // 3
    // 3
  

• addChild - 添加一个子元素到最后，并添加监听
  • @params item {Object} - 子元素属性内容
• removeChild - 移除一个子元素，并取消监听
  • @params item {Model} - 子元素实例
• resetChildren - 重设所有子元素，并添加监听
  • @params items {Array}

connect

model高级用法，关联2个不同的 model

usage

import Model from 'cartons/model';
import { connect } from 'cartons/descriptors';
 
import ModelA from './model-a';
 
class ModelB extends Model {
  @connect({
    modelDidUpdate: function () {
      // this === b
      // this.a === a
      // 需要的各种操作，比如更新属性等
    }
  })
  a = new ModelA();
}
 
let b = new ModelB();

这样a被修改的时候，会关联触发b的update事件

其他可用的功能

key-creators

现在提供以下几种key生成规则

randomCreator([length = 32], [radix = 16]) 生成一个随机数作为key

Arguments

• [length = 32] 以2^length的方式生成一个随机数
• [radix = 16] 输出的结果的数字基数，默认转换为16进制

incrementCreator(prefix = '') 以递增方式返回key

actions

bindAction(filter: Function|Object)))

usage

class A {
  @bindAction((_self) => (_self.model)) action1 = action1;
  model = new CustomModel();
}
 
var a = new A();
a.action1(1);
 
function action1 (param) {
  // param === 1
  return function (model) {
    // model === a.model
  }
}

bindActions(actions: Object.<Function>, options: { actionsAttributeName: string = 'action' })))

usage

class A {
  @bindActions({ action1, action2, ... })
  model = new CustomModel();
}
 
var a = new A();
a.model.actions.action1(1);

createActions()

usage

class A extend Model {
  @createActions()
  actions = { action1, action2, ...}
}