handlebars模板源更改
提问于 2017-02-23 10:20:07
由于某种原因(翻译)，我需要修改脚本中的一些文本，那么有没有什么方法可以用javascript来实现呢？那么，举个例子，下面我将如何改变文本“房间类型”？
<script id="simple-template" type="text/x-handlebars-template">
<div class="row booking-detail-row">
<div class="col-sm-3"><label><strong>Room Type</strong></label></div>
<div class="col-sm-9">{{roomTypeName}}</div>
</div>
</script>致以亲切的问候，Jure
回答 1
Stack Overflow用户
发布于 2017-02-23 19:18:05
要正确地进行转换，您需要修改模板以将标签文本视为数据，而不是普通文本。
因此，您的模板将如下所示(在您提供的示例中)：
<script id="simple-template" type="text/x-handlebars-template">
<div class="row booking-detail-row">
<div class="col-sm-3"><label><strong>{{roomTypeLabel}}</strong></label></div>
<div class="col-sm-9">{{roomTypeName}}</div>
</div>
</script>现在，在应用模板之前，您需要在JavaScript中更新数据流或拦截数据流。要在JavaScript中做到这一点，这里有一个关于如何实现它的工作示例：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
</head>
<body>
<div id="rooms"></div>
<script id="simple-template" type="text/x-handlebars-template">
<div class="row booking-detail-row">
<div class="col-sm-3"><label><strong>{{roomTypeLabel}}</strong></label></div>
<div class="col-sm-9">{{roomTypeName}}</div>
</div>
</script>
<script>
function translate(prop, lang) {
switch(prop) {
case 'roomType':
return (lang === 'en') ? 'Room Type' : 'Type de chambre';
break;
default:
return (lang === 'en') ? 'Unknown' : 'Inconnu';
}
}
function addRoomType(roomTypeData, template, lang) {
roomTypeData.roomTypeLabel = translate('roomType', lang);
document.getElementById('rooms').innerHTML = template(roomTypeData);
}
$(function() {
var data = { roomTypeName: 'Kitchen' };
var source = $("#simple-template").html();
var template = Handlebars.compile(source);
addRoomType(data, template, 'fr');
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42412870
复制
腾讯云开发者
