CODEWITHSUNDEEP
javascriptknockout.js
Adam Szabo
Adam Szabo

Reputation: 11412

Troubles with knockoutjs binding

I'm new to knockoutjs, and my bindings are not working. Nothing is displayed.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
    <title></title>
    <script type='text/javascript' src='jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='knockout-2.3.0.js'></script>
    <script type='text/javascript' src='a.js'></script>
</head>
    <body>

    <table>
        <tbody data-bind="foreach: Timelines">
            <tr>
                <td data-bind="text: Name"></td>
            </tr>
        </tbody>
    </table>


    </body>
</html>

a.js:

    function Event(EventId, TimelineId, Date, Description) {
        var self = this;
        self.EventId = EventId;
        self.TimelineId = TimelineId;
        self.Date = Date;
        self.Description = Description;
    }

    function Timeline(TimelineId, Name, Color, PublicName) {
        var self = this;
        self.TimelineId = TimelineId;
        self.Name = ko.observable(Name);
        self.Color = ko.observable(Color);
        self.PublicName = ko.observable(PublicName);

        self.Events = ko.observableArray();
    }

    function TimelinesViewModel() {
        var self = this;
        self.Timelines = ko.observableArray([
            new Timeline(1, 'Elso', 'lightgreen', 'abc'),
            new Timeline(2, 'Masodik', 'pink', 'def')
        ]);
        self.StartDate = new Date();
        self.EndDate = new Date();
    }

    ko.applyBindings(new TimelinesViewModel());

What am I doing wrong?

Upvotes: 1

Views: 103

Answers (1)

nemesv
nemesv

Reputation: 139808

Because you have included the a.js in the header it gets executed before the DOM is loaded.

But the ko.applyBindings needs to be called after the DOM was loaded (see documentation: Activating Knockout section).

So you have two options:

Move the <script type='text/javascript' src='a.js'></script> inside the body after your table.

Or wait for the DOM loaded event (for example with using jQuery):

$(function(){
    ko.applyBindings(new TimelinesViewModel());
});

Upvotes: 2

Related Questions