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


贴张效果图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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