Question

由于某种原因（翻译）我需要更改脚本中的一些文本，所以有没有任何一种选项来用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>

亲切的问候，法律上的

Answer 1

要正确翻译，您需要修改模板，将标签文本视为数据，而不是直文。

所以你的模板看起来像这样（在你提供的例子中）：

<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>

车把模板源更改

1 个答案: