Question

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

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。现在它的工作方式就像你想要的那样：使用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>

我还将viewmodel连接到视图例如：

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

你完全忘掉了大部分内容。我建议您按照交互式tutorials了解如何执行此操作。

Knockout.js {{each}}没有列出javascript模板中的项目

1 个答案: