1

ノックアウト js は初めてで、バインディングが機能していません。何も表示されません。

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());

私は何を間違っていますか？

4

1 に答える 1

3

ヘッダーにを含めているためa.js、DOM がロードされる前に実行されます。

ただし、ko.applyBindingsDOM がロードされた後に呼び出す必要があります (ドキュメントを参照してください: Activating Knockout section )。

したがって、次の 2 つのオプションがあります。

<script type='text/javascript' src='a.js'></script>の後に内側を移動しbodyますtable。

または、DOM ロード イベントを待ちます (たとえば、jQueryを使用する場合):

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