车把模板给了我未定义的错误答案

【问题标题】：Handlebars Template is giving me undefine error车把模板给了我未定义的错误
【发布时间】：2013-12-24 07:56:20
【问题描述】：

我有一个 WebSql 查询结果，我正在尝试使用 Handlebars 进行模板化，但是当我编译并运行它时，它在网页上什么也没有显示。当我 console.log 模板 Handlebars 将此错误抛出到控制台。 “错误：您必须将字符串或 Handlebars AST 传递给 Handlebars.compile。您在把手第 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>

我真的不知道我做错了什么。如果有人能帮我解决这个问题，我会很高兴。这真的让我大吃一惊。提前谢谢你

【问题讨论】：

您是否在$.ready 块中运行您的代码？如果您在编译之前执行console.log($('#messageDetail-template').html());，您会看到正确的模板 HTML 吗？
@loganfsmyth 感谢您的回复。当我 console.log($('#messageDetail-template').html());它给了我未定义的。我已经更新了我的 HTML。该页面正在 Jquerymobile 页面中呈现。
什么叫loadMessageList？如果将messageDetail-template 脚本标记放在脚本上方的<head> 中是否有效？
我将模板脚本标签移动到我的页面顶部并且它可以工作，谢谢你。我可以自己回答这个问题吗？？

标签： javascript templates handlebars.js

【解决方案1】：

问题是您在浏览器完成加载和解析页面 HTML 之前调用了 loadMessageList。例如$('#messageDetail-template').length === 0 因为模板标签还没有被处理。

你有两个选择：

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

【讨论】：

【解决方案2】：

试试

 JSON.stringify(obj2)

在传递给模板之前

【讨论】：