将项目动态添加到 mdl 菜单
Dynamically add items to an mdl menu
我想将菜单项动态添加到 mdl 菜单。但是，我还没有弄清楚如何使用mdl注册新项目，以便它们正常工作。
这里 codepen 展示了不同的行为。值得注意的是，动态项目没有连锁反应，也没有点击关闭菜单。
该代码笔在新创建的项目和原始菜单元素上都使用了 componentHandler.upgradeElement，但没有任何效果。我注意到正确创建的菜单项除了一些其他属性外还有另一个 class (mdl-js-ripple-effect)，但是手动添加 class 或尝试使用元素数据导致在 mdl javascript 中有很多错误。我假设我只需要对 componentHandler 方法进行一些正确的调用，但我还没有找到任何关于它与子元素正确使用的文档。
不幸的是，这目前相当复杂，而且由于错误，这样做实际上会出现性能问题。不推荐。
最好的办法是销毁菜单并重建它 on-the-fly。
MDL 适用于更多的静态站点，对于需要更复杂控件和动态构建的站点，建议使用 Polymer。
您也可以不使用我们的 JS 并为此需要编写自己的组件。
我想将菜单项动态添加到 mdl 菜单。但是，我还没有弄清楚如何使用mdl注册新项目，以便它们正常工作。
这里 codepen 展示了不同的行为。值得注意的是，动态项目没有连锁反应，也没有点击关闭菜单。
该代码笔在新创建的项目和原始菜单元素上都使用了 componentHandler.upgradeElement，但没有任何效果。我注意到正确创建的菜单项除了一些其他属性外还有另一个 class (mdl-js-ripple-effect)，但是手动添加 class 或尝试使用元素数据导致在 mdl javascript 中有很多错误。我假设我只需要对 componentHandler 方法进行一些正确的调用，但我还没有找到任何关于它与子元素正确使用的文档。
不幸的是，这目前相当复杂，而且由于错误，这样做实际上会出现性能问题。不推荐。
最好的办法是销毁菜单并重建它 on-the-fly。
MDL 适用于更多的静态站点，对于需要更复杂控件和动态构建的站点，建议使用 Polymer。
您也可以不使用我们的 JS 并为此需要编写自己的组件。