ycloud-datamodel

云采前端数据模型抽象

灵感

在企业级应用的页面（或者说以大多数后台管理页面为例），大多数都是数据实体的加上基于实体的一些交互。

以采购订单为例，同时采购订单实体一般包含：

• 保存（Save/Update）
• 按id查询采购订单（Load(id)）
• 查询采购订单列表 (Load())
• 删除（Delete(id)）
• 提交（Confirm）

参考Backbone对于实体和集合的区分。

我们将订单实体定义成Model:OrderModel，将订单列表定义成Collection:[OrderModel,OrderModel,OrderModel] Collection是由Model的列表组成，于是我们在实体和列表层面实现了对Model模型的复用。

同时，我们给Model定义三个字段id，name，code

 function Model () {
    this.id = '';
    this.name = '';
    this.code = '';
 }
 

同时我们给Model的原型添加上面提到的方法

Model.prototype.save = function () {
  // 保存方法
}
Model.prototype.load = function (id) {
  // 按id查询方法
}
Model.prototype.delete = function (id) {
  // 删除方法
}
Model.prototype.confirm = function () {
  // 提交方法
}

试想，我们在开发页面的时候，将model和页面的viewmodel做绑定。 需要保存单据的时候，只需要调用

var model =  new Model({/* init data*/})
model.save()

对比以前的页面

var model = {id:1, name: '2', code: '3'}
$.ajax({
  url: 'xxxxxurl',
  type: 'get',
  success: function (data) {
    //这里还需要把data转换成vm等等
  }
})

简单比较，代码量小了，语义更明确了，代码更收敛了，复用的成本更低了。

主子表扩展

采购业务流程、物资列表属于询价单的其中一个子表，这个子表的数据实体可以复用到下游单据定标单、合同、采购订单。 所以我们就可以把这个子表抽象出一个Model实体，在不同的单据中复用。

我么通过在Model初始化的时候创建associations属性来生命，当前主表所关联的子表

import materialDetail from './materialDetail'
Model.define(name, {
  meta: {
    name: {},
    value: {},
    tagList: {}
  },
  associations: {
    tagList: {
      type: 'hasMany', // hasMany
      model: listItemExample.name
    }
  },
  proxy: {
    get: '/xxxget',
    post: '/xxxpost',
    put: 'xxxput',
    delete: 'xxxdelete'
  }
})
// materialDetail.js
const name = 'materialDetail'
Model.define(name, {
  meta: {
    materialName: {},
    materialCode: {}
  }
})

如何使用

定义model

import {Model, Collection} from 'ycloud-datamodel
const name = 'materialDetail'
Model.define(name, {
  meta: {
    materialName: {},
    materialCode: {}
  },
  proxy: {
    get: '/xxxxurl'
  }
})

使用model

import materialDetail from './dataModel/materialDetail'
let model = modelExample.init()
let viewmodel = {
  pageModel: model.datatable // 这里实际是封装了iuap的dataTable，关于dataTable的使用就不再重复说明了
}
model.load({id: 1}) // 会默认调用使用get里的url对后台发出请求，数据查询出来之后自动对dataTable赋值
// 数据加载完毕监听事件
model.on('data', function () {
})
// 单据保存，注这里如果存在主子表会自动对主子表进行数据处理组合
model.save()