материализованный/метеор - выбор формы не работает

Я пытаюсь использовать материализованную форму выбора в своем приложении Meteor, но, похоже, это не работает....

Вот мой код:

HTML

<template name="createAutomatedaction">
    <div class="input-field col s12">
      <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <label>Materialize Select</label>
    </div>
</template>

js

Template.createAutomatedaction.onRendered(function(){
  this.$('select').material_select();
});

Когда я нажимаю кнопку выбора формы, раскрывающийся список не отображается. Может ли кто-нибудь посоветовать мне, что я пропускаю случайно? Ваша помощь будет очень признательна.

с этим https://www.dropbox.com/s/nzh7sp5x7by6e1t/Screenshot%202015-05-09%2018.20.54.png?dl=0

без этого https://www.dropbox.com/s/e1asl3y5pbtg5yp/Screenshot%202015-05-09%2018.24.08.png?dl=0


meteor materialized
person Masato    schedule 09.05.2015    source источник
comment
Без «этого». тоже не работает?   -  person sdooo    schedule 10.05.2015
comment
Спасибо за ваш ответ. Как вы можете видеть (я отредактировал свой вопрос), с этим отображается форма выбора, а без этого не отображается форма выбора... так что без этого, похоже, не работает.   -  person Masato    schedule 10.05.2015

Ответы (4)


arrow_upward
1
arrow_downward

Правильный код для инициализации выбора таков (при условии, что «createAutomatedaction» — это имя вашего шаблона)

Template.createAutomatedaction.onRendered(function() {
  $('select').material_select();
});

Если вы используете последнюю (на момент написания) версию materialize (v0.97.2) есть ошибка, из-за которой раскрывающийся список не создавался, исправлена ​​в этой фиксации.

Если вы хотите быстро исправить это вручную, возьмите неминифицированный js из их репозитория (dist/js/materialize.js), замените каждый экземпляр «$ body» на «bodyElement» и используйте его.

Селекторы будут работать.

person ThadeuLuz    schedule 16.11.2015

arrow_upward
0
arrow_downward

Поместите свой код jquery в событие шаблона:

Template.templatename.events({
      this.$('select').material_select();
});

Надеюсь, что это работает

person Tevin Thuku    schedule 31.10.2015

arrow_upward
0
arrow_downward

Добавление class="browser-default" в тег select помогло мне.

person lagfvu    schedule 13.03.2016

arrow_upward
-1
arrow_downward

Я удалил class="input-field", и это сработало для меня.

person Sifb71    schedule 15.03.2018