0

我是淘汰赛的新手，我正在尝试从 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/

谢谢

更新

这是课程的页面 在此处输入图像描述

这是我做的... 在此处输入图像描述

4

1 回答 1

1

您必须在代码中进行大量更改。

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

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

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

于 2013-11-03T12:16:03.577 回答