Question

我正在尝试将数组绑定到表，因此它显示了我所有的数组内容。

我尝试了第一个示例，该示例有效（纯HTML格式）：

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    function Model() {
        this.people = [
            { firstName: 'Bert', lastName: 'Bertington' },
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ];
    }
    ko.applyBindings(new Model());
</script>

然后我进入下一个级别，并尝试了更大的示例，该示例始终显示错误

无法处理绑定“ foreach：function（）{return interest}” 消息：已定义匿名模板，但未提供模板内容

以下是错误的代码：

// Activates knockout.js when document is loaded.
window.onload = (event) => {
    ko.applyBindings(new AppViewModel());
}

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(() => this.firstName() + " " + this.lastName(), this);

    this.interests = ko.observableArray([
        { name: "sport" },
        { name: "games" },
        { name: "books" },
        { name: "movies" }
    ]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
    <thead>
        <tr>
            <th>Interest</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: interests"></tbody>
    <tr>
        <td data-bind="text: name"></td>
    </tr>
</table>

我已经对常规数组感到厌倦，但是没有运气。

Answer 1

您要在内部模板之前关闭<tbody>：

<tr>
    <td data-bind="text: name"></td>
</tr>

因此，tr现在不在foreach绑定的上下文中。

将</tbody>移至</tr>之后和</table>标签之前：

// Activates knockout.js when document is loaded.
window.onload = (event) => {
    ko.applyBindings(new AppViewModel());
}

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(() => this.firstName() + " " + this.lastName(), this);

    this.interests = ko.observableArray([
        { name: "sport" },
        { name: "games" },
        { name: "books" },
        { name: "movies" }
    ]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
    <thead>
        <tr>
            <th>Interest</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: interests">
      <tr>
          <td data-bind="text: name"></td>
      </tr>
    </tbody> <!-- close here -->
</table>

Answer 2

将HTML更改为

<table>
    <thead>
        <tr>
            <th>Interest</th>
        </tr>
    </thead>
    <tbody>
    <tr data-bind="foreach: interests">
        <td data-bind="text: name"></td>
    </tr></tbody>
</table>

淘汰赛JS无法绑定到数组

2 个答案: