Material Design Lite Table - Adding Rows Dynamical

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>

Problem is, that the labels for is connected to the inputs id.

So when I add dynamically a new checkbox, I have to also add an id. But how do I find out which Id to add? Wouldn't it be a problem, when I am later going to add these rows into a database?

Here is the working example:

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

Notice the checkbox of the new task you add

Answer 1

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

To upgrade all elements, use this code:

componentHandler.upgradeAllRegistered();

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

How Component Handler works?

Answer 2

My personnal approach is to create a component. I have a working one here in coffeescript and jade

Basically you need to call componentHandler.upgradeElements(el). Last time I checked this wasn't enough as it wasn't adding the ripple effect so you also need to upgrade the lastChild. Please note there's a difference with componentHandler.upgradeElement(el) and componentHandler.upgradeElements(el) which, if I recall correctly, walk deeply the dom.

About the problem with the id you should just use the $index. I updated the codepen so it solves your problem and I'll come back at you to help you with the style of the checkbox(which is not the question initially).

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

Answer 3

As mentioned, you need to upgrade the element. You could call componentHandler.upgradeDom() instead of componentHandler.upgradeElement().

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

Answer 4

You need to call componentHandler.upgradeElement(el) after adding the checkbox to the DOM. I'm not familiar with vue.js, so I can't suggest the specific code change required, but this article seems like it has the answer.