Handlebars模板未出现

Handlebars templates not appearing

本文关键字：Handlebars      更新时间：2023-12-13

我正试图将一个项目添加到列表中，该项目的标题与用户在文本框中输入的标题相同，使用Handlebars来处理模板，并将显示标题更改为用户输入的任何内容。

当用户单击按钮时，实际的列表项被添加，但标题不会根据我的手把模板显示。

这是我的HTML:

<section id="list" class="hidden">
    <div class="row">
        <div class="four columns center-text">
            <h1>Bukkitt</h1>
            <p>Add your bucket list items below...</p>
            <input id="newItem" class="input center-text" type="text"/> <br>
            <a id="addButton" href="#"><i id="add" class="icon-plus-circled"></i></a>
        </div>
        <div class="eight columns center-text">
            <h1>Your Bucket List...</h1>
                <ul class="list">
                    <script id="list-items" type="text/x-handlebars-template">
                        {{#each this}}
                        <li>
                            <h3>{{name}}</h3>
                            <ul class="helperSites">
                                <li><img src="{{helpers}}" alt=""/></li>
                            </ul>
                        </li>
                        {{/each}}
                    </script>
                </ul>
        </div>
    </div>
</section>

还有我的JS：

function Item(name) {
    this.name = name;
    this.helpers = [];
}
var allItems = [];
function Helper(site) {
    this.site = site
};
Item.prototype = {
    constructor: Item,
    addHelper:function(site) {
        new Helper(site);
        this.helpers[length-1]
    }
};

//New Item Button
var newItem = document.getElementById("newItem");
$('#addButton').click(function(){
     var item = new Item(newItem.value);
     allItems.push(item);
    console.log(allItems);
        var template = Handlebars.compile( $('#list-items').html() );
        var temp = template(allItems);
        $('ul.list-items').append(temp);
});

任何帮助都将不胜感激！！

$('ul').append(temp);

修复

问题
相关文章：