{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 干净又极端 的问题《Troubles with knockoutjs binding》','https://www.manongdao.com/q-966201.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
Because you have included the
a.jsin the header it gets executed before the DOM is loaded.But the
ko.applyBindingsneeds 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 thebodyafter yourtable.Or wait for the DOM loaded event (for example with using jQuery):