這兩天深入研究了autoform的代碼!終于明白了custom template該如何編寫。
autoform-api.js定義了Autoform變量,在Autoform中定義了client可以調(diào)用的所有api
AutoForm.addHooks(formIds,hooks,replace)
formIds:指定需要被hook的form,可以為單個(gè)id或數(shù)組,為null將會(huì)遍歷所有form
hooks:"before", "after", "formToDoc", "docToForm", "onSubmit", "onSuccess","onError".
AutoForm.getFormValues(formId,template,ss,getModifier)
formId:需要獲取指定id的form的values
template:模板實(shí)例
ss:SimpleSchema實(shí)例
getModifier:Boolean類型,為true返回modifier對(duì)象,為false返回normal對(duì)象
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: 默認(rèn)是bootstrap-3,還有plain和bootstrap3-horizonal模板。custom template就是仿照這幾個(gè)模板寫就可以
fieldName:因?yàn)閝uicForm是一個(gè)包含了Field With No Groups、Field With Groups,Context。fileName是指的便是field
skipExistsCheck: 是否跳過template是否存在的檢查
autoform-helpers.js
注冊(cè)了app中Template可以使用的所有方法
afFieldMessage:返回錯(cuò)誤信息~使用方法{{{afFieldMessage name=this.name}}} name指定ss的對(duì)象名稱
afFieldNames:返回array對(duì)象包含了所有的field~使用方法{{#each afFieldNames name=this.name}} name指定ss的對(duì)象名稱
afFieldIsInvalid:返回指定ss的對(duì)象是否通過驗(yàn)證
demo:
product: {
type: Array,
editableBy: ["member", "admin"],
minCount: 1,
autoform: {
template: "westore",
order: 50
}
},
afArrayField_westore template
{{afFieldLabelText name=this.atts.name}} 打印標(biāo)題
{{#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"}}
每個(gè)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}}
貼張效果圖
