如何在淘汰赛中进行简单的模板数据绑定？

Question

我是淘汰赛的新手，我正在尝试从plurasight中解决这个问题，它将绑定一个javascript数组并在网页中显示为网格。只是无法弄清楚我做了什么错，因为我做了视频所做的事情。 以下是我的代码：请有人帮我一把吗？

<div id="tagsList">
    <div>
         <h2>Tags</h2>

    </div>
    <div>
        <input type="text" placeholder="Add New Tag" />
        <button>+ Add</button>
        <ul data-bind="template: {name: 'tagsTempl', foreach: tags}"></ul>
    </div>
</div>
<script id="tagsTempl" type="text/html">
    < li > < span > $ {
        Name
    }
    $ {
        (new Date).toLocaleTimeString()
    } < /span>
            <div>
                <a href="#" >Edit</a > < a href = "#" > Delete < /a>
            </div > < /li>
</script>

$(function () {


    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 = {
        //data
        tags: ko.observableArray(data),
        tagToAdd: ko.observable(""),

        //behaviours
        addTag: function () {
            this.tags.push({
                Name: this.tagToAdd()
            });
            this.addTag("");
        }
    };

    ko.applyBindings(viewModel);

});

我的代码也是http://jsfiddle.net/hanxuema/NTYLD/

由于

更新

这是课程中的页面

这是我做的......

Answer 1

您必须在代码中更改批次。

1. 从模板“<script id="tagsTempl" type="text/html">”
中删除不需要的空间
2. 您必须进行正确的数据绑定操作。
   • 对输入标记进行值数据绑定
   • 点击数据绑定“+添加”
   • 对模板中的span标记进行文本数据绑定
3. 由于你自己调用“addTag”，这可能会在addTag函数中产生无限循环。所以将this.addTag（“”）更改为this.tagToAdd（“”）。

这里工作小提琴手http://jsfiddle.net/NTYLD/4/

注意：这里我删除了jQuery的$(function(){})和模板引擎的语法。