4

构建一个表单并获取数据，然后使用 handlebars.js 填充表格。在第一次运行时效果很好，如果数据发生更改，则不会再次填充。关于如何让它发挥作用的任何想法？

$('a.button').on("click", function(e){
        e.preventDefault();

        var date = $('#datepicker').val();
        var func = "get_all_swo_by_date";
        //$('table.output').empty();

        $.ajax({
            url: "../includes/db_functions.inc.php",
            type: "post",
            data: ({ p : date, f : func }),
            dataType: "json",
            success: function(results) {
                var source = $("#entry-template").html();
                var template = Handlebars.compile(source);
                $('table.output').empty();
                if(results.length > 0)
                {
                    $.each(results, function(i, context){
                        $('table.output').append( template(context) );
                    });
                } else {
                    $('table.output').append("There is no data to return.");
                }

            }
        });
    });

当单击带有一类按钮的“a”时，它会填充表格..（如上所述）。现在，当您将 datepicker 更改为另一个日期并单击带有一类按钮的“a”时，它不会重新填充表格。

如果有人对为什么它不起作用有合理的想法，请告诉我。请不要只是编造东西。我一个人可以做很多事情.. :)

4

2 回答 2

9

好的，这就是答案，以防有人在路上寻找它。

我想做的是在添加更改的数据之前清除表格，所以当我设置：

$('table.output').empty();

在附加之前，我认为这可能有效。但是，我很懒惰，没有将我的 handlebars.js 模板放到另一个文件中，所以我所做的只是清除我的模板，这样就无法重新填充它。本质上它甚至不存在..

因此，创建一个名为 yourtemplate.handlebars 的外部文件并将您的代码添加到其中。就我而言，它是 swooutput.handlebars：

<tr>
<td>{{id}}</td>
<td>{{item_no}}</td>
<td>{{swo}}</td>
<td>{{team_number}}</td>
<td>{{employee_payrate}}</td>
<td>{{customer_number}}</td>
<td>{{customer_name}}</td>
<td>{{customer_number}}</td>
<td>{{week_ending}}</td>
</tr>

然后在 js 文件夹中创建一个 templates.js 文件，如下所示：

Handlebars.getTemplate = function(name) {
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined)    {
    $.ajax({
        url : name + '.handlebars',
        success : function(data) {
            if (Handlebars.templates === undefined) {
                Handlebars.templates = {};
            }
            Handlebars.templates[name] = Handlebars.compile(data);
        },
        async : false
    });
}
return Handlebars.templates[name];
};

我从某个地方得到的，但现在不记得在哪里。如果我这样做，我会发布链接。无论如何，不​​是在页面中使用模板，而是使用该函数来获取模板（使其比在运行时编译更快）。或者你可以使用预编译的模板，我只是觉得这个方法更简单。

所以这是带有修改后代码的最终 jquery ajax 调用：

$('a.button').on("click", function(e){
            e.preventDefault();

            var date = $('#datepicker').val();
            var func = "get_all_swo_by_date";
            //$('table.output').empty();

            $.ajax({
                url: "../includes/db_functions.inc.php",
                type: "post",
                data: ({ p : date, f : func }),
                dataType: "json",
                success: function(results) {
                    $('table.output').empty();

                    var template = Handlebars.getTemplate('swooutput');

                    $.each(results, function(i, context){
                            $('table.output').append( template(context) );
                    });

                }
            });
        });

我希望这可以帮助下一个出现的人。

于 2013-04-12T21:16:52.340 回答
3

只需添加

<thead>

和

<tbody> tags. So your table will look something like:

<table id="tblUsers">


    <tr>
        <th>
            ID
        </th>
        <th>
            Name
        </th>
        <th>
            Last name
        </th>
        <th class="header">
            Username
        </th>
        <th>

            &nbsp; &nbsp;</th>
        <th>
            &nbsp;&nbsp;</th>
    </tr>  
    </thead>
    <tbody>

    </tbody>

还有你的 jQuery：

function _onSuccess(data) {
    console.log(data.d);
    $('#tblUsers > tbody').empty(); //HERE'S WHERE YOU CLEAN THE TABLE'S BODY OR TBODY
    $.map(data.d, function (item) {
        var rows = "<tr>"
            + "<td style='border:2px solid black; cursor: default;'>" + item.id_user + "</td>"
            + "<td style='border:2px solid black; cursor: default;'>" + item.name + "</td>"
            + "<td style='border:2px solid black; cursor: default;'>" + item.last_name + "</td>"
            + "<td style='border:2px solid black; cursor: default;'>" + item.username + "</td>"
            + "<td style='border:2px solid black; cursor: pointer;'><input type='button' class='btEdit' id='e" + item.id_user + "' ></td>"
            + "<td style='border:2px solid black; cursor: pointer;'><input type='button' class='btDel' id='d" + item.id_user + "'></td>"
            + "</tr>";
        $('#tblUsers tbody').append(rows);
    })
}
于 2014-02-05T23:10:23.360 回答