Блог

Я разрабатываю пользовательский autocomplete тип для afQuickfield своего проекта Meteor. Проблема, с которой я сталкиваюсь, заключается в том, что когда я устанавливаю значение type="autocomplete" on afQuickfield , class="form-control" атрибут отсутствует. Для всех других типов полей он включен.

Я проверил form-control все кодовые meteor-autoform базы, а также scss js каталоги and bootstrap библиотеки. Я вижу только вхождения в журнал изменений и определения классов в scss / css.

Я мог бы просто включить class="form-control" в afQuickfield определение, но это исправление для обезьян, и я не любитель срезать углы.

Кто-нибудь может помочь мне понять, как form-control назначается в autoForm полях?

Вот мой пользовательский autocomplete код (это WIP, так что не судите!). Я просто надеюсь начать с текстового элемента с соответствующим atts , чтобы я мог строить оттуда.

 // autocomplete.js
AutoForm.addInputType('autocomplete', {
  template: 'afAutocomplete',
  valueOut: function () {
    return this.val()
  },
  valueConverters: {
    stringArray: AutoForm.valueConverters.stringToStringArray,
    number: AutoForm.valueConverters.stringToNumber,
    numberArray: AutoForm.valueConverters.stringToNumberArray,
    boolean: AutoForm.valueConverters.stringToBoolean,
    booleanArray: AutoForm.valueConverters.stringToBooleanArray,
    date: AutoForm.valueConverters.stringToDate,
    dateArray: AutoForm.valueConverters.stringToDateArray
  },
  contextAdjust: function (context) {
    context.atts.autocomplete = 'off'
    return context
  }
})

// autocomplete.html
<template name="afAutocomplete">
  <input type="text" value="{{this.value}}" {{this.atts}} />
</template>
 

Вот код из type="text" поля для сравнения.

 // text.js
AutoForm.addInputType('text', {
  template: 'afInputText',
  valueOut: function () {
    return this.val()
  },
  valueConverters: {
    stringArray: AutoForm.valueConverters.stringToStringArray,
    number: AutoForm.valueConverters.stringToNumber,
    numberArray: AutoForm.valueConverters.stringToNumberArray,
    boolean: AutoForm.valueConverters.stringToBoolean,
    booleanArray: AutoForm.valueConverters.stringToBooleanArray,
    date: AutoForm.valueConverters.stringToDate,
    dateArray: AutoForm.valueConverters.stringToDateArray
  },
  contextAdjust: function (context) {
    if (typeof context.atts.maxlength === 'undefined' amp;amp; typeof context.max === 'number') {
      context.atts.maxlength = context.max
    }
    return context
  }
})

// text.html
<template name="afInputText">
  <input type="text" value="{{this.value}}" {{this.atts}}/>
</template>
 

Как вы можете видеть, они практически идентичны, но версия автозаполнения не form-control содержит класса в фактическом выводе HTML.

Есть идеи?

На самом деле это, похоже, последующая ошибка AutoForm , потому что она уже должна выдавать следующую ошибку при включении afInputText :

Существует несколько шаблонов с именем ‘afInputText’. Каждому шаблону необходимо уникальное имя

А как насчет отсутствия form-control ?

Это правильно само по себе, потому class что в шаблоне нет input атрибута afAutoComplete .

Встроенные в AutoForm типы ввода не имеют атрибутов класса, поскольку они будут переопределены темами.

Например text , входные данные в теме Bootstrap 4 в настоящее время выглядят следующим образом:

 <template name="afInputText_bootstrap4">
  <input type="text" value="{{this.value}}" {{attsPlusFormControlClass}}/>
</template>
 

который сам определяется как вспомогательный.

Итак, как безопасно определить шаблон?

Поскольку может наступить день, когда вы перейдете с Bootstrap 4 на Bootstrap 5, вы можете фактически создать свой компонент логику, как определено выше:

 // autocomplete.js
AutoForm.addInputType('autocomplete', {
  template: 'afAutocomplete',
  valueOut: function () {
    return this.val()
  },
  valueConverters: {
    stringArray: AutoForm.valueConverters.stringToStringArray,
    number: AutoForm.valueConverters.stringToNumber,
    numberArray: AutoForm.valueConverters.stringToNumberArray,
    boolean: AutoForm.valueConverters.stringToBoolean,
    booleanArray: AutoForm.valueConverters.stringToBooleanArray,
    date: AutoForm.valueConverters.stringToDate,
    dateArray: AutoForm.valueConverters.stringToDateArray
  },
  contextAdjust: function (context) {
    context.atts.autocomplete = 'off'
    return context
  }
})
 

 // autocomplete.html
<template name="afAutocomplete">
  <input type="text" value="{{this.value}}" {{this.atts}} />
</template>
 

и дополнительно создайте отдельный шаблон, который переопределяет стиль:

 <template name="afAutocomplete_bootstrap4">
    <input type="text" class="form-control" value="{{this.value}}" {{attsPlusFormControlClass}} />
</template>
 

Здесь важна комбинация afAutocomplete и _bootstrap4 , которая используется AutoForm для определения текущего шаблона, если либо установлен шаблон по умолчанию bootstrap4 , либо текущая форма используется bootstrap4 в качестве темы.