javascript - Knockout.js {{each}} 未在 javascript 模板中列出项目

Question

我创建了一个简单的应用程序，它应该将模型中的每个项目列出到列表中，并使用 javascrit 模板创建。

Fiddle

HTML:

<div id="tagsList" class="box">
    <div class="box-head">
        <h2 class="left">Tags</h2>
    </div>
    <div class="box-content">
        <input type="text" placeholder="Add New Tag" />
        <button>+ Add</button>
        <div data-bind="template: 'tagsTempl'"></div>
    </div>
</div>

<script id="tagsTempl" type="text/html">
    <ul>
        {{each tags}}
            <li class="tagItem">
                <span>${Name}</span>
                <div>
                    <a href="#" class="tag-edit">Edit</a>
                    <a href="#" class="tag-delete">Delete</a>
                </div>
            </li>
        {{/each}}
    </ul>
</script>

Javascript:

$(function () {
    //$("#tagDialog").hide();

    var data = [
        { Id: 1, Name: "Ball Handling" },
        { Id: 2, Name: "Passing" },
        { Id: 3, Name: "Shooting" },
        { Id: 4, Name: "Rebounding" },
        { Id: 5, Name: "Transition" },
        { Id: 6, Name: "Defense" },
        { Id: 7, Name: "Team Offense" },
        { Id: 8, Name: "Team Defense" }
    ];

    var viewModel = {
        tags: ko.observableArray(data),
        tagToAdd: ko.observable(""),
        addTag: function() {
            this.tags.push({ Name: this.tagToAdd() });
        }
    }

    ko.applyBindings(viewModel) 
});

列表输出:{{每个标签}}${姓名}编辑删除{{/每个}}

可以通过查看源代码来访问脚本文件。我不确定我的错误在哪里。有什么帮助吗？

Answer 1

我更新了您的fiddle 。现在它正在按照您想要的方式工作:标签列表正在使用 knockout 标准方法呈现，如 docs 中所述。 .

HTML

<ul data-bind="template: {name: 'tagsTempl', foreach: tags}"></ul>

模板

<script id="tagsTempl" type="text/html">
    <li class="tagItem">
        <span data-bind="text: Name"></span>
        <div>
            <a href="#" class="tag-edit">Edit</a>
            <a href="#" class="tag-delete">Delete</a>
        </div>
     </li>
 </script>

我还将 View 模型连接到 View 。
例如:

<button data-bind="click: addTag">+ Add</button>

你只是忘记了大部分内容。建议您关注互动tutorials关于如何做到这一点。