Question

我有一个WebSql查询结果我试图用Handlebars模板，但是当我编译并运行它在网页上什么也没显示。当我在console.log中时，模板Handlebars将此错误抛给控制台。 “错误：你必须将一个字符串或Handlebars AST传递给Handlebars.compile。你在Handlebars第2523行传递了undefined”。我很困惑，因为当我复制sql结果并按字面意思将其编译时。

这是sql结果的一个示例请注意：我是新手。

{ 
    deleted: "0" 
    lastModified : "2013-12-17 11:42:11" 
    mesID : "201" 
    message : "Good morning Mr Amos" 
    subID : "18"
}

这是我的JAVASCRIPT

function loadMessageList(subID){
    $("#messageDetailList").empty();
    db.transaction (function(tx) {
        tx.executeSql('SELECT * FROM MESSAGETB WHERE subID ="'+ subID +'"', 
            [], function (tx, results) {
                var len = results.rows.length;
                var obj = [];            
                for(var i = 0; i<len; i++) {
                 obj[i] = results.rows.item(i);
                }
                var obj2 = obj;
                renderTemplate(obj2);
        });
    });    
}    

function renderTemplate (obj2){
    var template = Handlebars.compile($('#messageDetail-template').html());
    $('#messageDetailList').append(template(obj2));     
}

这是我的HTML

<div data-role="page" id="messageDetail">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        <ul id="messageDetailList" data-role="listview">
            <script id="messageDetail-template" 
                type="text/x-handlebars-template">   
                {{#each}}
                <li>
                    <div class="phil-legend">
                        <span class="my-message">{{message}}<br /></span>
                        <span class="sent-mesid">{{mesID}}<br /></span>
                        <span class="my-subid">{{subID}}<br /></span>
                        <span class="my-modified">{{lastModified}}<br /></span>
                        <span class="my-deleted">{{deleted}}<br /></span>
                    </div>
                </li>       
                {{/each}}    
                </script>  
        </ul>
    </div>
    <div data-role="footer">
        <h4>Footer</h4>
    </div>
</div>

我真的不知道我做错了什么。如果有人能帮我解决这个问题，我会很高兴的。它真的给了我一个真正的头脑。提前谢谢

Answer 1

问题是您在浏览器加载并解析页面HTML之前调用了loadMessageList。例如$('#messageDetail-template').length === 0因为尚未处理模板标记。

您有两种选择：

将#messageDetail-template元素移到您调用loadMessageList的代码中的位置上方，以便正确找到它
在调用loadMessageList之前，等待页面完全加载/处理。例如$.ready(function(){ ... });

Answer 2

尝试

 JSON.stringify(obj2)

在传递给模板之前

把手模板给我未定义的错误

2 个答案: