2013-07-20 60 views
1

我是新来的knockoutjs,并且我的绑定不起作用。没有显示。与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> 

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

我在做什么错?

回答

3

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

但是在加载DOM后需要调用ko.applyBindings(请参阅文档:Activating Knockout section)。

所以,你有两个选择:

table后移动body<script type='text/javascript' src='a.js'></script>

或等待DOM加载事件(例如使用jQuery):

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