Material Design Lite Table - adding dynamic line breaks

Question

This is the markup for the checkbox using 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>

The problem is that the labels for are connected to the id inputs .

Therefore, when I add a dynamically new checkbox, I must also add id. But how do you know which identifier to add? Isn't that a problem when I'm going to add these rows to the database later?

Here is a working example:

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

Pay attention to the flag of the new task to be added.

Answer 1

, . componentHandler.upgradeDom() componentHandler.upgradeElement().

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

Answer 2

. coffeescript jade

componentHandler.upgradeElements(el). , , , , lastChild. , componentHandler.upgradeElement(el) componentHandler.upgradeElements(el), , , dom.

id $index. , , , ( ).

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

Answer 3

Material Design Lite , MDL, . , DOM, , upgradeElement.

, :

componentHandler.upgradeAllRegistered();

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

?

Answer 4

componentHandler.upgradeElement(el) DOM. vue.js, , , .