您好我是使用Knockout.js的新手。我正在尝试使用knockout.js在我的HTML模板中加载我从API(Json格式)获得的一些数据
这是我开发的.js。
function cronologiaViewModel() {
var self = this;
self.publicaciones = ko.observableArray();
self.current_page = 1
load = function() {
cargarCronologia();
}
cargarCronologia = function() {
$.ajax({
type: "GET"
url : '/timeline/get_privada/',
dataType : "json",
beforeSend : function() {
},
success : function(data) {
index = 0;
data.results.forEach(function (element) {
element.created_relative = moment(element.fecha).fromNow();
//element.comments_count = element.comments.length
//element.can_delete = element.owner.username.valueOf() == self.current_user.valueOf()
ko_element = ko.mapping.fromJS(element);
self.publicaciones.push(ko_element);
});
}
});
}
cronologiaVM = cronologiaViewModel()
ko.applyBindings(cronologiaVM);
这就是我的模板中我想要使用数据绑定来获取数据的地方。
<!-- beginning of the Post-->
<div class="col-sm-10 ">
<div class="bubble">
<div class="pointer" data-bind="foreach: publicaciones">
<p data-bind="text: contenido" > A Personal Post</p>
</div>
<div class="pull-left">Publicado hace:</div>
<div class="pointer-border"></div>
</div><!-- bubble end -->
<br>
<p class="post-actions"> <a href="#">Me Gusta</a> - <a href="#">Compartir</a> </p>
<div class="comment-form">
<form class="form-inline">
<div class="form-group, col-sm-8">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Ingrese su comentario">
</div>
<button type="submit" class="btn btn-default">Comentar</button>
</form>
</div><!-- comment form end -->
<!-- End Post-->
我正在使用的脚本
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript "></script>
<!-- Director App -->
<script src="js/Director/app.js" type="text/javascript"></script>
<script async src="js/moment/moment.min.js"></script>
<script async src="js/socialUcla/cronologia.js"></script>
“Contenido”是Json提供的属性对象。
My Json
{ "id": 1,
"contenido": "Mi primer Post",
"fecha": "2017-02-11T20:46:14.050475Z"}