2013-07-20 2 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.

Но должно быть вызвано ko.applyBindings после загрузки DOM (см. Документацию: Activating Knockout section).

Так у вас есть два варианта:

переместить <script type='text/javascript' src='a.js'></script> внутри body после table.

Или ждать DOM загружен события (например, с помощью jQuery):

$(function(){ 
    ko.applyBindings(new TimelinesViewModel()); 
}); 
Смежные вопросы