Parsing html code with jQuery
I am using new material-design-lite (mdl) on my website. I am also loading dynamic content using mustache.js .
Now the new elements need to be registered with the upgradeElement
mdl function to learn about them and apply javascript to them. On their website, they have a sample code to do this:
<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>
However, I am using jQuery and I am not entirely sure how I am supposed to parse the entire template I am getting from mustache.js
and register each component correctly. This is what I tried:
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
just give a clear idea of what it might contain. I need to bind all input, textboxes, sliders, radio, checkboxes and a button. In the example above, you can see a simple map layout from mdl, with two radio boxes and a button.
I tried to force the componentHandler to update the button element first, but the mdl returns element.getAttribute is not a function
, so I guess I am just giving the wrong value .upgradeElement()
.
What am I doing wrong here?
Here is some sample code: http://codepen.io/anon/pen/JdByGZ
source to share
I structured my application as a generic container and set of views loaded by jQuery and rendered using Hogan. I call componentHandler.upgradeDom()
after inserting templates and it seems to work fine.
I guess this could be optimized further, update in less granularity, but this simple approach works well in my Phonegap app. The tmpl and content variables make debugging easier, otherwise the code can be more compact.
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();
});
};
source to share