jqote 模板问题与 jquery ui 选项卡（内有视频）

Question

我使用 jQote 作为我的页面的模板系统。我很难用文字解释发生的事情，所以我上传了一段视频。

http://www.youtube.com/watch?v=ugw4lIsF0HM

基本上有时会渲染正确，有时不喜欢出现错误。 Chrome 和 Firefox 不会报告和错误，当我使用 Chrome 进行检查时，如果渲染不正确或渲染正确，输出是相同的。

这是我的代码。

    <script type="text/javascript"> 

    $.getJSON('/json/testData', function(data) {
        $('#reportDiv').prepend($('#template').jqote(data));       
        // $('#reportDiv').html($.jqote('#template', data));   
    });     

</script>

<div id="pkgLineTabs" style="font-style: inherit; font-size: 13px" >
    <div id="reportDiv"></div>
</div>

<script type="text/x-jqote-template" id="template">
    <![CDATA[
    <ul>
        <% for (i = 0; i <= data.length; i++) { %>
        <li><a href="#pkgLineTabs_<%= this.data[i].hash %>" class="toolTip" id="<%= this.data[i].hash %>"><%= this.data[i].shortname %></a></li>
        <% } %>
    </ul>

    ]]>
</script>

我已经尝试了我能想到的一切。我已经将文件从头部移动到页面底部。改变了顺序。我不确定发生了什么事。

这是我的 json，供需要的人查看。

{"data":[{"hash":"FB900DF","shortname":"Lines 3 & 4 - Baltimore"},{"hash":"FBAE86D","shortname":"Line 1 Cans"}]}

我不知道以前是否有人见过这个。由于 ${ 字符，我无法切换到 jquery 模板。 Play 框架不喜欢那样。

我有一种感觉，这与 $.getJSON 调用有关，因为如果我使用 setTimeout 函数并将其设置为 1 或 10 之类的值，它永远不会正确完成。

感谢您的任何帮助。

编辑：

<script type="text/x-jqote-template" id="template">
<![CDATA[
<ul>
    <% for (i = 0; i <= data.length; i++) { %>
    <li><a href="#pkgLineTabs_<%= this.data[i].hash %>" class="toolTip" id="<%= this.data[i].hash %>"><%= this.data[i].shortname %></a></li>
    <% } %>
</ul>
<% for (i = 0; i <= data.length; i++) { %>
<div id="pkgLineTabs_<%= this.data[i].hash %>">
    <table class="reportTable display" style="font-size:13px" title="<%= this.data[i].hash %>" >
        <thead> 
            <tr> 
                <th style="">Row Color</th> <!--hidden -->
                <th style="">Time Stamp</th> 
                <th style="">Ounces</th> 
                <th style="">Revolutions</th>  
                <th style="">Pallet Count</th> 
                <th style="">Roll Change</th>
                <th style="">Breaks</th>                
            </tr> 
        </thead>
        <tbody> 
            <tr> 
                <td colspan="5" class="dataTables_empty">Loading data from server...</td> 
            </tr> 
        </tbody> 
    </table>
</div>
<% } %>
]]>

这是完整的代码。

这是我的数据表函数，

$(window).load(function() {         

    $('.reportTable').each(function() {     

        var pkgLineId = $(this).attr('title');

        var reportTable = $(this).dataTable({         

            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": false,
            "bSort": false,
            "bInfo": true,
            "bAutoWidth": false,       
            "bProcessing": true,
            "bServerSide": true,
            "bProcessing": true,
            "sDom": '<"H"lfrp>t<"F"lip>',
            "iDisplayLength": 15,
            "aLengthMenu": [[10, 15, 20, 50, 100, 200, 500], [10, 15, 20, 50, 100, 200, 500]], 
            "aoColumns": [
            {
                "bVisible": false
            },          
            null,
            null,
            null,                  
            null,
            null,
            null      
            ],
            "sAjaxSource": '/json/reportData/'+pkgLineId,
            "fnDrawCallback": function() {

                var nodes = reportTable.fnGetNodes(); 
                var lineStatus;
                for (var i = 0; i < nodes.length; i++) {                
                    lineStatus = reportTable.fnGetData(nodes[i]);              
                    nodes[i].setAttribute("style", "background: " + lineStatus[0]);                
                }   
            }           
        }); 
    });

}); 

我尝试将其放入 $.getJSON 的complete()函数中，但事实是它需要window.load，因为它是相当多的数据。不过我可能错过了一些东西。

我的数据表有时会触发。有时它只是挂起，什么也没有发生。

Answer 1

根据您显示的代码，您到底在哪里启动选项卡？因为从表面上看，在启动选项卡之前，您不会检查 json 请求是否已完成，如果是这样，您得到的结果并不令人意外（假设您当前在本地，当你会把它移到互联网上，你可能不会让它工作一次）。

试试这个，编辑以下内容：

   $.getJSON('/json/testData', function(data) {
        $('#reportDiv').prepend($('#template').jqote(data));       
        // $('#reportDiv').html($.jqote('#template', data));   
    });  

要包含启动选项卡的部分，如下所示：

   $.getJSON('/json/testData', function(data) {
        $('#reportDiv').prepend($('#template').jqote(data));       
        // $('#reportDiv').html($.jqote('#template', data));
        $( "#pkgLineTabs" ).tabs(); //and whatever settings you have for it currently, i.e. move it here
    });