我正在开发一个较旧的 Symfony2 项目并大量使用 Twig。
这是单行的模板:
<tr>
<td class="centerCell">
<img src="/images/social-icons/{{ review.type }}.png" title="{{ review.type }}"/>
</td>
<td data-rating="{{ review.rating }}" class="centerCell">
<div class="starContainer">
{% for i in 1..5 %}
<span class="gfsStar{% if i <= review.rating %} on{% endif %}"></span>
{% endfor %}
</div>
<div class="ratingBadge">{{ review.rating }} / 5</div>
</td>
<td>
<div {% if review.content|length > 275 %} class="block-with-text" {% endif %}>{{ review.content }}</div>
{% if review.content|length > 275 %} <div class="over-flow-indicator">[Read more]</div> {% endif %}
</td>
<td>{{ review.time }}</td>
<td class="centerCell">{{ review.author }}</td>
<td>
<a class="viewButton" href="{{ review.url }}" target="_blank">View</a>
</td>
</tr>
我使用 ajax 调用一个 Controller 来获取模型数据,然后调用 renderView() 方法来生成 HTML。
我想在前端添加排序/分页,但我发现的所有插件都不支持添加渲染 HTML 的行(通过 ajax)。在页面加载时,我只想显示 10-20 条评论,并在用户进一步分页时向服务器请求更多评论。 Bootstrap-table 似乎是一个很好的解决方案,但由于模板的复杂性,我没有找到实现其 ajax 功能的好方法。
显然这不是一个新问题,人们以前是如何解决这个问题的?
最佳答案
我不想在这里回答我自己的问题,但经过大量调查后,我确实找到了一个不错的解决方案。我必须避免在服务器端渲染 HTML,而是在 JavaScript 中实现一组简单的函数,这些函数完成了 Smart 之前所做的相同的事情。下面是相当于上面 Twig 模板的 JS:
function transformData(data) {
var transformedArray = [];
for(var i = 0; i < data.length; i++) {
var obj = {
id : data[i].id,
type : getTemplate('type', data[i].type),
author : data[i].author,
time : data[i].time,
rating : getTemplate('rating', data[i].rating),
content : getTemplate('content', data[i].content),
url : getTemplate('url', data[i].url)
};
console.log("In loop: " + i);
console.dir(obj);
transformedArray.push(obj);
}
return transformedArray;
}
function getTemplate(key, value) {
var html = '';
switch (key) {
case "type" :
html = '<img src="/images/social-icons/' + value + '.png" style="height:32px;" title="' + value + '"/>';
break;
case "rating" :
html = getRatingHTML(value);
break;
case "content" :
html = getContentHTML(value);
break;
case "url" :
html = '<a class="viewButton" href="' + value + '" target="_blank">View</a>';
break;
}
return html;
}
function getContentHTML(value) {
var html = '<div',
indicator = '';
if (value.length > 275) {
html += ' class="block-with-text"';
indicator += '<div class="over-flow-indicator">[Read more]</div>';
}
html += '>' + value + '</div>' + indicator;
return html;
}
function getRatingHTML(value) {
var html = '<div class="starContainer" style="min-width: 72px">';
for (var i = 1; i <= 5; i++) {
html += '<span class="gfsStar ';
if (i <= value) {
html += 'on';
}
html += '"></span>';
}
html += "</div>";
html += '<div class="ratingBadge">' + value + ' / 5</div>';
return html;
}
我正在使用bootstrap-table plugin使用自定义 ajax 方法。看起来像这样:
function getReviewData(params, offset) {
$.post("/extended-review-monitor/reviews", {"limit": 10, "offset": offset})
.done(function (data) {
console.dir(data);
processedData = transformData(data.data);
console.log("processed data");
console.dir(processedData);
setTimeout(function() {
params.success({
total: data.data[0].total,
rows: processedData
});
}, 1000);
})
.fail(function () {
console.log("ajax error");
});
console.log("ajax complete");
}
我真的希望这最终能帮助其他人。
关于javascript - 服务器端渲染的 HTML -> JS 表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37800579/