I'm learning knockout.js and i trying to get data from a rest API. The rest API has two end points
1) '/posts
2) '/posts/<id>
When i use the first endpoint, nothing happens and there is no error in my script. As a matter of fact, looking at the firebug console, i can see that the 'GET' query returns the right result. On the other hand, when i use endpoint 2, everything works normally.
Below is my code. thanks
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,400italic,700' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='knockout-3.1.0.js'></script>
<script type='text/javascript' src='jquery-1.11.0.min.js'></script>
</head>
<body id="slide-full">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">
<a class="brand" href="/">Maganata</a>
</li>
<li ><a href="/login">Login</a>
</li>
<li><a href="/logout">Log out</a>
</li>
</ul>
</div>
</div>
<div id ='main'>
<!-- ko foreach: posts -->
<p>Hello</p><span data-bind="text: title"></span></p><p data-bind="text: content"></p>
<p data-bind="text: author"></p><p data-bind="text: date"></p>
<!-- /ko -->
</div>
<script type="text/javascript">
function Post(data){
this.title = ko.observable(data.title);
this.content = ko.observable(data.content);
this.author = ko.observable(data.author);
this.date = ko.observable(data.date);
}
function PostListViewModel(){
var self = this;
self.posts = ko.observableArray();
$.getJSON("/posts", function(getPost){
var mappedPost = $.map(getPost, function(item){
return new Post(item)
});
self.posts(mappedPost);
});
}
ko.applyBindings(new PostListViewModel());
</script>
<!-- Home Story -->
</body>
<footer>
<div class="col-md-9 footer-widget last">
<p class="copy">Privacy Policy</p>
<p class="copy">@ All rights reserved 2013</p>
</div>
</div>
</div>
</footer>
<!-- Footer -->
</html>