Question

我使用把手生成这样的tableview模板：

模板

<div id="incidentTableView">
    <script id="incidentTemplate" type="text/x-handlebars-template">
        <table class="table">
            <thead>
            <th>Latitude</th>
            <th>Longitude</th>
            </thead>
            <tbody>
            {{#incidents}}
            <tr>
                <td>{{Latitude}}</td>
                <td>{{Longitude}}</td>
            </tr>
            {{/incidents}}
            </tbody>
        </table>
    </script>
</div>

的JavaScript

$(document).ready(function () {
   $('#incidentForm').submit(function(e){
       e.preventDefault();
       var incidentLatitudeValue = $('#incidentLatitude').val();
       var incidentLongitudeValue = $('#incidentLongitude').val();

       $.post('ajax/test.php',
           {
           inputLatitude: incidentLatitudeValue,
           inputLongitude: incidentLongitudeValue
           },
           function(data){
               $('#incidentTableView').replaceWith($(this).createIncidentTableView(data));
           },
           "json");
   });

});

(function($){
    $.fn.createIncidentTableView = function(data){
        var source = $("#incidentTemplate").html();
        var template = Handlebars.compile(source);
        var context = {
            incidents: $.parseJSON(data)
        }
        return template(context);
    };
})(jQuery);

该脚本在第一次运行时工作正常。当我在表单中输入数据并点击提交按钮时，tableview会顺利显示来自数据库的数据。

当我输入其他数据并第二次点击提交按钮时，会出现以下错误：

XHR finished loading: POST "http://api.url.com/public/ajax/test.php".
handlebars-v3.0.0.js:2381 Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined

#incidentTemplate如何在第二次尝试时破坏流量？有什么方法可以确保在加载所有内容时进行编译？

Answer 1

#incidentTemplate如何破坏第二个流量尝试？

因为在第一个post后你用这里编译的html替换模板：

 $('#incidentTableView').replaceWith($(this).createIncidentTableView(data));

将模板放在#incidentTableView div之外的某个位置。

此外，replaceWith将替换当前匹配的元素，因此您将使用第一个#incidentTableView上的代码从DOM中删除post。您需要div来处理后续的post，因此您需要执行以下操作：

$('#incidentTableView').html($(this).createIncidentTableView(data));

把手编译错误

1 个答案: