用jQuery解析html代码

问题描述

我在我的网站上使用了新的 （mdl）。 我也使用加载动态内容。

现在，需要使用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只是为了清楚地了解它可以包含的内容。 我需要绑定所有输入，textareas，滑块，无线电，复选框和按钮。 在上面的示例中，您可以看到来自mdl的简单卡片布局，带有两个收音机盒和一个按钮。

我试图让componentHandler首先升级button-element，但是mdl返回element.getAttribute is not a function ，所以我想我只是给了.upgradeElement()错误的值。

我在这做错了什么？

这是一个codepen作为例子： ：//codepen.io/anon/pen/JdByGZ

我将我的应用程序构建为一般容器和一组视图，加载了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();
  });
};