1

这是使用 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>

问题是，标签连接到输入id。

所以当我动态添加一个新的复选框时，我还必须添加一个 id。但是我如何找出要添加的 Id 呢？当我稍后将这些行添加到数据库中时，这不是问题吗？

这是工作示例：

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

注意您添加的新任务的复选框

4

4 回答 4

3

如前所述，您需要升级元素。你可以打电话componentHandler.upgradeDom()而不是componentHandler.upgradeElement().

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

于 2015-09-19T23:05:24.683 回答
3

Material Design Lite 将在页面加载时自动注册和渲染所有标记有 MDL 类的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。

要升级所有元素，请使用以下代码：

componentHandler.upgradeAllRegistered();

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

组件处理程序如何工作？

于 2015-12-08T11:15:13.573 回答
2

我个人的方法是创建一个组件。我在这里有一个用咖啡脚本和玉石工作的

基本上你需要打电话componentHandler.upgradeElements(el)。上次我检查这还不够，因为它没有添加涟漪效应，所以你还需要升级lastChild. 请注意有一个区别componentHandler.upgradeElement(el)，componentHandler.upgradeElements(el)如果我没记错的话，深入dom。

关于 的问题，id您应该只使用$index. 我更新了 codepen，所以它解决了你的问题，我会回来帮助你处理复选框的样式（这最初不是问题）。

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

于 2015-09-19T09:24:34.370 回答
1

您需要componentHandler.upgradeElement(el)在将复选框添加到 DOM 后调用。我对 vue.js 不熟悉，因此无法建议所需的具体代码更改，但这篇文章似乎已经有了答案。

于 2015-09-18T19:02:24.187 回答