这两天深入研究了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}}
贴张效果图