Question

使用Knockout模板，所有示例似乎都将单个值传递给模板而不是数组数据。我有一个模板，它将创建一些基本的HTML，然后使用传入模板的数据呈现一个表。以下是它的外观：

<script type="text/html" id="my-template">
    <p>Here is the data</p>
    [MORE HTML DATA HERE]

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Surname</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: [WHAT DO I PUT HERE???]">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: FirstName"></td>
                <td data-bind="text: Surname"></td>
            </tr>
        </tbody>
    </table>
</script>


<div data-bind="template: { name: 'my-template', data: PersonArray1 }"></div>
<div data-bind="template: { name: 'my-template', data: PersonArray2 }"></div>
<div data-bind="template: { name: 'my-template', data: PersonArray3 }"></div>

模板确实支持foreach绑定，但我不认为我可以使用它，因为我不希望为数组中的每个项重复标记[MORE HTML DATA HERE]的模板HTML标题数据

我想在模板中使用foreach绑定，如上面的粗略示例所示。有没有办法让这项工作成功？我认为答案在上面标有[我在哪里投放???]的占位符，但我不知道是否有一个包含顶级模板数据的变量。

Answer 1

您正在寻找的是$data参数，该参数将为您提供所提供数组的每个条目：

var myViewModel = {
    PersonArray1 : [
      { Id: 1, FirstName: "Alice", Surname: "Bloggs" },
      { Id: 2, FirstName: "Bob", Surname: "Bloggs" },
      { Id: 3, FirstName: "Claire", Surname: "Bloggs" }
    ]
};

ko.applyBindings(myViewModel)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<script type="text/html" id="my-template">
    <p>Here is the data</p>
    [MORE HTML DATA HERE]

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Surname</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: $data">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: FirstName"></td>
                <td data-bind="text: Surname"></td>
            </tr>
        </tbody>
    </table>
</script>


<div data-bind="template: { name: 'my-template', data: PersonArray1 }"></div>

Answer 2

我从这个链接找到了答案，解决方案由创作者自己发布。

https://github.com/knockout/knockout/issues/246

解决方案是在这个小提琴中提供的： http://jsfiddle.net/b9WWF/

感兴趣的部分是您调用模板的地方，而不是直接向数据属性提供对象，您可以按如下方式提供命名值中的数据：

<div data-bind="template: { name: 'my-template', data: { people: PersonArray1 } }"></div>
<div data-bind="template: { name: 'my-template', data: { people: PersonArray2, displayAdmins: false } }"></div>

然后，您可以按如下方式访问模板中的数组（我使用上面的代码作为示例）：

<tbody data-bind="foreach: people">

knockout.js我可以将一个数据数组传递给模板吗？

2 个答案: