Knockout不加载我的UI

时间:2017-03-15 23:11:23

标签: javascript jquery html json knockout.js

您好我是使用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"}

The error that I get in the Chrome console

0 个答案:

没有答案