Таблица Material Design Lite — добавление строк с динамическим разрывом формата

Это разметка для флажка с использованием material-design-lite:

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox">
  <input type="checkbox" id="checkbox" class="mdl-checkbox__input" />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

Проблема в том, что метка for связана с входами id.

Поэтому, когда я динамически добавляю новый флажок, я также должен добавить идентификатор. Но как мне узнать, какой идентификатор добавить? Не будет ли это проблемой, когда я позже добавлю эти строки в базу данных?

Вот рабочий пример:

http://codepen.io/anon/pen/QjNzzO

Обратите внимание на флажок новой задачи, которую вы добавляете


javascript html vue.js css material-design-lite
person LoveAndHappiness    schedule 18.09.2015    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Как уже упоминалось, вам нужно обновить элемент. Вы можете позвонить componentHandler.upgradeDom() вместо componentHandler.upgradeElement().

http://codepen.io/pespantelis/pen/pjbvBL

person Pantelis Peslis    schedule 19.09.2015

arrow_upward
3
arrow_downward

Material Design Lite автоматически регистрирует и отображает все элементы, отмеченные классами MDL, при загрузке страницы. Однако в случае динамического создания элементов DOM вам необходимо зарегистрировать новые элементы с помощью функции upgradeElement.

Чтобы обновить все элементы, используйте этот код:

componentHandler.upgradeAllRegistered();

http://www.getmdl.io/started/index.html#dynamic

Как работает обработчик компонентов?

person Rahul Sagore    schedule 08.12.2015

arrow_upward
2
arrow_downward

Мой личный подход заключается в создании компонента. У меня есть рабочий здесь в coffeescript и jade

В основном вам нужно позвонить componentHandler.upgradeElements(el). В прошлый раз, когда я проверял, этого было недостаточно, так как не добавлялся волновой эффект, поэтому вам также необходимо обновить lastChild. Обратите внимание, что есть разница с componentHandler.upgradeElement(el) и componentHandler.upgradeElements(el), которые, если я правильно помню, глубоко ходят по дому.

Что касается проблемы с id, вы должны просто использовать $index. Я обновил codepen, чтобы решить вашу проблему, и я вернусь к вам, чтобы помочь вам со стилем флажка (что изначально не было вопросом).

http://codepen.io/anon/pen/dYMBqj?editors=101

person Posva    schedule 19.09.2015
comment
Ваш codepen больше не работает, а ссылка на github не работает. - person Adam; 29.01.2018
comment
Да, это было для vue 0.12 :( К сожалению, у меня нет новых ссылок - person Posva; 04.02.2018

arrow_upward
1
arrow_downward

Вам нужно вызвать componentHandler.upgradeElement(el) после добавления флажка в DOM. Я не знаком с vue.js, поэтому не могу предложить конкретное изменение кода, но это статья кажется, что в ней есть ответ.

person Stephen Thomas    schedule 18.09.2015