用jQuery解析HTML代码

Question

我正在我的网站上使用新的material-design-lite(mdl)。 我还使用 mustache.js 加载动态内容。

现在，新创建的元素需要使用upgradeElement函数进行注册，以便mdl知道它们并将javascript应用于它们。 在他们的网站上，他们有一些 示例代码 来做到这一点：

<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 只是为了清楚地说明它所包含的内容。我需要绑定所有输入、文本区域、滑块、单选框、复选框和按钮。在上面的示例中，您可以看到一个简单的来自 mdl 的卡片布局，其中包含两个单选框和一个按钮。

我试图让 componentHandler 首先升级 button 元素，但是 mdl 返回 element.getAttribute 不是函数，所以我想我只是给了错误的值给 .upgradeElement()。

我在这里做错了什么？

这里有一个代码演示作为例子: http://codepen.io/anon/pen/JdByGZ

- jdepypere

Answer 1

如果你只想更新按钮，请尝试componentHandler.upgradeElement(this, 'MaterialButton');，如果想更新所有元素，请使用componentHandler.upgradeAllRegistered();。

http://jsbin.com/tuluda/4/edit?js,output

- rafaelcastrocouto

---

展示一下你是如何将回调函数附加到事件上的。 - rafaelcastrocouto

我不明白...上面的链接似乎很好用...内容在单击时添加到正文中...我有什么遗漏吗？ - rafaelcastrocouto

问题在于元素没有正确地在 MDL 中注册。单选按钮没有样式，按钮也没有涟漪效果。请参见我的问题中的原始示例，以了解它应该是什么样子。 - jdepypere

现在我明白了...更新了答案...这是代码http://jsbin.com/tuluda/4/edit?js,output - rafaelcastrocouto

非常感谢！太简单了...如果我的问题有点不清楚，对不起！ - jdepypere

Answer 2

我将我的应用程序结构化为一个通用容器和一组视图，使用jQuery加载并使用Hogan渲染。在插入模板后，我调用componentHandler.upgradeDom()，看起来运行良好。

我猜这可能可以进一步优化，以更小的粒度进行升级，但是这种简单的方法在我的Phonegap应用程序中运行良好。 变量tmpl和content存在是为了方便调试，否则代码可能会更紧凑。

app.render = function(template, data, destination) {
  $.get(template, function(html) {
    var tmpl = Hogan.compile(html);
    var content = tmpl.render(data);
    $(destination).html(content);
    componentHandler.upgradeDom();
  });
};

- mico