Twig for WordPress - markhowellsmead/helpers GitHub Wiki
{% set component = component|merge({
'image_left': component.downloads_image_left,
'image_right': component.downloads_image_right
}) %}This provides a basis, which Twig.js parses using pre-defined data.
<script type="text/template" data-search-result-list>
{% verbatim %}
<ul class="search-result-list">
{% for result in results %}
<li class="search-result-entry" data-search-result-id="{{ result.doc_id }}">
<p class="search-result-entry-title"><a href="{{ result.url_link }}">{{ result.title }}</a></p>
<div class="search-result-entry-content_description">{{ result.content_description }}</div>
</li>
{% endfor %}
</ul>
<p class="search-results-info">Showing {{ page_size }} results from a total of {{ record_count }}.</p>
{% endverbatim %}
</script>Assuming that Twig.js is installed and available and that response_data.response contains a valid AJAX response object. Add your own safety and bug checks.
(function($) {
var ajaxSuccessCallback = function(response_data){
// Validate your response data here! Then:
var template_object,
twig_template = $('[data-search-result-list]').html();
if(twig_template !== ''){
if(!template_object){
template_object = Twig.twig({
data: twig_template
});
}
var output = template_object.render({
results: response_data.response.result,
page_size: response_data.response.page_size,
record_count: response_data.response.record_count
});
window.console.log(output);
}
};
$.ajax({
type: 'post',
url: 'YOURURL',
data: YOURPOSTDATA,
dataType: 'jsonp',
success: ajaxSuccessCallback
});
});