1

我是 knockoutjs 的新手，我的绑定不起作用。什么都没有显示。

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>

一个.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());

我究竟做错了什么？

4

1 回答 1

3

因为您已将 DOM 包含a.js在标题中，所以它会在加载 DOM 之前执行。

但是ko.applyBindings需要在 DOM 加载后调用（参见文档：Activating Knockout section）。

所以你有两个选择：

在你<script type='text/javascript' src='a.js'></script>的.bodytable

或者等待 DOM 加载事件（例如使用jQuery）：

$(function(){
    ko.applyBindings(new TimelinesViewModel());
});
于 2013-07-20T14:02:26.157 回答