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

贴张效果图