如何在淘汰赛中做一个简单的模板数据绑定？答案

【问题标题】：How to do a simple template data-bind in knockout?如何在淘汰赛中做一个简单的模板数据绑定？
【发布时间】：2013-11-03 04:33:21
【问题描述】：

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

谢谢

更新

这是课程页面

这是我做的...

【问题讨论】：

有什么问题？请更清楚地描述您预期会发生什么以及实际发生了什么。另外，为什么你的标记中有所有这些额外的空格，为什么你有一个包含其他元素的 <script> 元素？
$ 未定义。您没有为文档就绪处理程序包括 jQuery。看，当我们移除包装 $(function(){...}) 时，我们会得到一些输出：jsfiddle.net/NTYLD/1
@ahren 谢谢，但是，您的版本仍然显示 html 标签。你知道如何让它显示来自js数组的实际数据吗，请看我更新中的图片。
@nnnnnn 谢谢。请看我的更新。为什么脚本元素包含其他元素？我不确定，这是视频课程的代码.....
@nnnnnn - 包含其他元素但具有type="text/html" 或type="template/html" 属性的脚本元素通常用于模板。浏览器会忽略 script 元素的内容，但您仍然可以检索它进行处理。

标签： jquery html data-binding knockout.js

【解决方案1】：

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

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

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

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

【讨论】：