Handlebars 重新编译模板

Question

我正在使用车把，我遇到了这种情况。

我向服务器发出请求，并获取我需要的所有数据并将其放在视图中。我用 handlebars 来放那个数据，没有问题。

现在，我需要每隔 1 或 2 分钟执行一次请求。但是当我要将数据再次放入视图中时，出现了错误。这是因为我已经编译好的模板和插入模板的标签已经不存在了

有什么解决办法吗？我在这里留下了我的代码：

在我看来我有这个：

<script id="vessels-info" type="text/x-handlebars-template">
        {{#vessel}}
        <div id="content-vessels" class="col-xs-12 col-sm-6">
        <div class="page-header">
        <h2 id="shipnametitle">{{vesselname}}</h2>
        </div>
        <div class="row">
        <div class="col-sm-12">
        <div class="list-group">
        <a class="list-group-item">
        <b>ID</b>: {{id}} 
        </a>
        <a class="list-group-item">
        <b>Posición GPS</b>: ({{lat}} , {{long}})
        </a>
        <a class="list-group-item {{alertafecha gpsdate}}" >
        <b>Fecha GPS</b>: {{gpsdate}} 
        </a>
        <a class="list-group-item {{alertavelocidad speed}}">
        <b>Velocidad</b>: {{speed}}
        </a>
        {{#if rpm}}
        <a class="list-group-item">
        <b>RPM</b>: {{rpm}}
        </a>
        <a class="list-group-item {{alertafecha gpsdate}}" class="{{alerta}}">
        <b>Fecha RPM</b>: {{rpmdate}}
        </a>
        {{/if}}
        </div>
        </div>
        </div>
        </div>
        {{/vessel}}
            </script>

在我的 JavaScript 中，我有这个：

function initAlerts() {
    try {
        getVesselsRequest(alertas, "mapa");
        setInterval(initAlerts, 60000);
    } catch (err) {
        console.log(err);
    }
}
function alertas(vessels, mapa) {
    var fuente = $('#vessels-info').html();
    var plantilla = Handlebars.compile(fuente);
    var html = plantilla(vessels);
    $('#map-container').html(html);
}

错误是这样的：

Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined

我知道错误是当我将 $('#vessels-info').html(); 传递给编译函数时，ID 为 'vessels-info' 的标记 <script> 不再存在，因为已经编译了。

有什么帮助吗？

Answer 1

在这种情况下，您可以将对模板的引用保留为字符串。类似于：

    var templateString = $('#vessels-info').html();

    function alertas(vessels, mapa) {
        var plantilla = Handlebars.compile(templateString);
        var html = plantilla(vessels);
        $('#map-container').html(html);
    }

将这样的变量放在全局范围内是不好的做法。如果您的应用程序变得更加复杂，我会建议创建一个对象，然后保存状态并进行定期更新。

Handlebars 重新编译模板

Handlebars re-compile templates

javascript

handlebars.js