我正在使用新的 material-design-lite (mdl) 在我的网站上。我还使用 mustache.js 加载动态内容.
现在,需要使用 upgradeElement
函数注册新创建的元素,以便 mdl 了解它们并将 javascript 应用到它们。在他们的网站上有一些 sample code这样做:
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>
但是,我使用的是 jQuery,我不完全确定应该如何解析从 mustache.js
获得的整个模板并正确注册每个组件。这是我试过的:
var filledTemplate = '
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Title</h2>
</div>
<div class="mdl-card__supporting-text">
<p>A simple paragraph with below some radio buttons</p>
<p>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_0">
<input type="radio" id="input_0" class="mdl-radio__button" name="options" value="radio1" />
<span class="mdl-radio__label">Radio button 1</span>
</label>
</p>
<p>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_1">
<input type="radio" id="input_1" class="mdl-radio__button" name="options" value="radio2" />
<span class="mdl-radio__label">Radio button 2</span>
</label>
</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Send
</a>
</div>
</div>';
var html = $.parseHTML(filledTemplate);
$(html).find(".mdl-js-button").each(function(){
componentHandler.upgradeElement($(this));
});
filledTemplate
只是为了清楚地说明它可以包含的内容。我需要绑定(bind)所有输入、文本区域、 slider 、 radio 、复选框和按钮。在上面的示例中,您可以看到来自 mdl 的简单卡片布局,带有两个单选框和一个按钮。
我试图让 componentHandler 首先升级按钮元素,但是 mdl 返回 element.getAttribute is not a function
,所以我想我只是给 提供了错误的值.upgradeElement()
.
我在这里做错了什么?
这里有一个codepen作为例子:http://codepen.io/anon/pen/JdByGZ
最佳答案
尝试 componentHandler.upgradeElement(this, 'MaterialButton');
如果你只想更新按钮或 componentHandler.upgradeAllRegistered();
更新所有元素。
关于javascript - 使用 jQuery 解析 html 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31476494/