http://stackoverflow.com/questions/42822443/knockout-does-not-load-my-ui

by jlspake

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>

<!-- 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-->

JavaScript

function cronologiaViewModel() {
  var self = this;
  self.publicaciones = ko.observableArray();
  self.current_page = 1;

  self.load = function() {
      cargarCronologia();
  }

	cargarCronologia = function() {

    $.ajax({
        type: "GET",
        url : '/echo/json',
        dataType : "json",
        beforeSend : function() {
        },
        success : function(data) {
            data.results=[{ "id": 1,
    "contenido": "Mi primer Post",
    "fecha": "2017-02-11T20:46:14.050475Z"}]; //debugging only
            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);
            }); 
        }
    });
	}
}

var cronologiaVM = new cronologiaViewModel();
cronologiaVM.load();
ko.applyBindings(cronologiaVM);