aldeed:autoform的custom template

這兩天深入研究了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}}


貼張效果圖

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,554評(píng)論 19 139
  • 1.在C/C++中實(shí)現(xiàn)本地方法 生成C/C++頭文件之后,你就需要寫頭文件對(duì)應(yīng)的本地方法。注意:所有的本地方法的第...
    JayQiu閱讀 2,532評(píng)論 0 3
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語(yǔ)法,類相關(guān)的語(yǔ)法,內(nèi)部類的語(yǔ)法,繼承相關(guān)的語(yǔ)法,異常的語(yǔ)法,線程的語(yǔ)...
    子非魚_t_閱讀 34,692評(píng)論 18 399
  • 5月7日,2017年巴菲特股東大會(huì)召開,全球投資者的目光都聚焦在美國(guó)內(nèi)布拉斯加州的小鎮(zhèn)奧馬哈。股神巴菲特針對(duì)富國(guó)銀...
    呼彩云閱讀 847評(píng)論 0 1
  • 新南方新農(nóng)泰培訓(xùn)基地11月1日訊:2017年11月的第一天,參加培訓(xùn)的瑞普集團(tuán)精英們,經(jīng)過一天多緊張的理論學(xué)習(xí),于...
    朱道路閱讀 506評(píng)論 0 0

友情鏈接更多精彩內(nèi)容