[英]Parsing html code with jQuery
I'm using the new material-design-lite (mdl) on my website. 我在我的网站上使用了新的material-design-lite (mdl)。 I'm also loading in dynamic content using mustache.js .
我也使用mustache.js加载动态内容。
Now, the newly created elements need to be registered with using the upgradeElement
function for mdl to know of them and apply the javascript to them. 现在,需要使用
upgradeElement
函数为mdl注册新创建的元素以了解它们并将javascript应用于它们。 On their website they have some 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'm not entirely sure how I should parse the whole template I get from mustache.js
and register each component correctly. 但是,我正在使用jQuery,我不完全确定如何解析我从
mustache.js
获得的整个模板并正确注册每个组件。 This is what I've 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));
});
The filledTemplate
is just to give a clear idea of the stuff it can contain. filledTemplate
只是为了清楚地了解它可以包含的内容。 I need to bind all input's, textareas, sliders, radios, checkboxes and a button. 我需要绑定所有输入,textareas,滑块,无线电,复选框和按钮。 In the example above you can see a simple card-layout from mdl, with two radio boxes and a button.
在上面的示例中,您可以看到来自mdl的简单卡片布局,带有两个收音机盒和一个按钮。
I tried to get the componentHandler to upgrade the button-element first, but mdl returns element.getAttribute is not a function
, so I guess I'm just giving the wrong value to .upgradeElement()
. 我试图让componentHandler首先升级button-element,但是mdl返回
element.getAttribute is not a function
,所以我想我只是给了.upgradeElement()
错误的值。
What am I doing wrong here? 我在这做错了什么?
Here is a codepen as an example: http://codepen.io/anon/pen/JdByGZ 这是一个codepen作为例子: http ://codepen.io/anon/pen/JdByGZ
Try componentHandler.upgradeElement(this, 'MaterialButton');
尝试
componentHandler.upgradeElement(this, 'MaterialButton');
if you want just to update the button or componentHandler.upgradeAllRegistered();
如果你只想更新按钮或
componentHandler.upgradeAllRegistered();
to update all elements. 更新所有元素。
http://jsbin.com/tuluda/4/edit?js,output http://jsbin.com/tuluda/4/edit?js,output
I have structured my app as a general container and a set of views, loaded with jQuery and rendered with Hogan. 我将我的应用程序构建为一般容器和一组视图,加载了jQuery并使用Hogan进行渲染。 I am invoking
componentHandler.upgradeDom()
after inserting templates and is seems to work fine. 我在插入模板后调用
componentHandler.upgradeDom()
,似乎工作正常。
I guess this might be optimized further, upgrading on a smaller granularity, but this simple minded approach works fine in my Phonegap application. 我想这可能会进一步优化,以更小的粒度进行升级,但这种简单的方法在我的Phonegap应用程序中运行良好。 The variables tmpl and content are there to ease debugging, otherwise the code might be made more compact.
变量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();
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.