aldeed:autoform的custom template

这两天深入研究了autoform的代码!终于明白了custom template该如何编写。

autoform-api.js定义了Autoform变量,在Autoform中定义了client可以调用的所有api

AutoForm.addHooks(formIds,hooks,replace)

formIds:指定需要被hook的form,可以为单个id或数组,为null将会遍历所有form

hooks:"before", "after", "formToDoc", "docToForm", "onSubmit", "onSuccess","onError".

AutoForm.getFormValues(formId,template,ss,getModifier)

formId:需要获取指定id的form的values

template:模板实例

ss:SimpleSchema实例

getModifier:Boolean类型,为true返回modifier对象,为false返回normal对象

AutoForm.getFieldValue(fieldName,formId)

fieldName:指定的filedName,返回指定fieldName的value

formId:指定的form的id的

AutoForm.getInputTypeTemplateNameForElement(element)

返回指定element的被render的template名称

AutoForm.getInputValue(element,ss)

返回指定element的field,非reactive

AutoForm.addInputType(name,definition)

添加自己的inputType custom components~具体使用可以参照autoform-autocomplete

AutoForm.getTemplateName(templateType,templateName,fieldName,skipExistsCheck)

templateType:使用范围afArrayField,afEachArrayItem,afFieldInput,afFormGroup,afObjectField,afQuickField,afQuickFields,autoForm,quickForm

templateName: 默认是bootstrap-3,还有plain和bootstrap3-horizonal模板。custom template就是仿照这几个模板写就可以

fieldName:因为quicForm是一个包含了Field With No Groups、Field With Groups,Context。fileName是指的便是field

skipExistsCheck: 是否跳过template是否存在的检查

autoform-helpers.js

注册了app中Template可以使用的所有方法

afFieldMessage:返回错误信息~使用方法{{{afFieldMessage name=this.name}}} name指定ss的对象名称

afFieldNames:返回array对象包含了所有的field~使用方法{{#each afFieldNames name=this.name}} name指定ss的对象名称

afFieldIsInvalid:返回指定ss的对象是否通过验证

demo:

product: {

type: Array,

editableBy: ["member", "admin"],

minCount: 1,

autoform: {

template: "westore",

order: 50

}

},


afArrayField_westore template

{{afFieldLabelText name=this.atts.name}} 打印标题


{{#each afFieldNames name=this.atts.name}}

{{#if this.labelText}}{{this.labelText}}{{else}}{{afFieldLabelText name=this.name}}{{/if}}

{{/each}}

遍历所有array成员

{{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}

{{> afQuickField name=this.name label=false options=afOptionsFromSchema template="customObjectField"}}

每个item显示

{{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}

编写autoform-remove-item的button

{{/if}}

{{/afEachArrayItem}}

{{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}

编写autoform-add-item的button

{{/if}}


贴张效果图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,494评论 18 139
  • 1.在C/C++中实现本地方法 生成C/C++头文件之后,你就需要写头文件对应的本地方法。注意:所有的本地方法的第...
    JayQiu阅读 2,296评论 0 3
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,493评论 18 399
  • 5月7日,2017年巴菲特股东大会召开,全球投资者的目光都聚焦在美国内布拉斯加州的小镇奥马哈。股神巴菲特针对富国银...
    呼彩云阅读 763评论 0 1
  • 新南方新农泰培训基地11月1日讯:2017年11月的第一天,参加培训的瑞普集团精英们,经过一天多紧张的理论学习,于...
    朱道路阅读 421评论 0 0