Knockout JS 无法绑定到数组

Question

I am trying to bind array to a table, so it shows all my array contents.

I tried first example, which works (purely in 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>

Then I got to the next level, and tried bigger example, which always shows error

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

Below is faulty code:

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

I tired already with regular array, but with no luck.

Answer 1

You are closing the <tbody> before the inner template:

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

So, the tr is now not in the context of the foreach binding.

Move the </tbody> to after the </tr> and before the </table> tags:

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

Change your HTML to

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