Knockout JS 无法绑定到数组

Question

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

我尝试了第一个示例，它有效（完全在 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>

然后我进入了下一个级别，并尝试了更大的示例，它总是显示错误

Unable to process binding "foreach: function(){return interests }" Message: Anonymous template defined, but no template content was provided

以下是错误代码：

// 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

将您的 HTML 更改为

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

Answer 2

您正在关闭内部模板之前的 <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>

Knockout JS 无法绑定到数组

Knockout JS Cannot bind to an array

javascript

knockout.js