Question

我正在尝试将项目添加到列表中，项目的标题等于用户在文本框中输入的内容，使用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);
});

非常感谢任何帮助!!

Answer 1

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

修复了问题

车把模板没有出现

1 个答案: