cartons

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, ...}
    }