videoGalleri

by Francesco Frustaci

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
	<div class="row" data-bind="foreach: cards" >
  <div class="col-md-3 col-sm-6">
    <div class="panel">
      <div class="panel-body padding-none">
        <a href="#"><img src="images/grid_001.jpg" class="width-x-100"></a>
          <div class="crp_box_text">
            <h4 class="title_box" data-bind="text: title">
            
              </h4>
              <p data-bind="value:title "</p>
        </div>
      </div>
    </div>
  </div>

JavaScript

function Card(data) {
    this.title = ko.observable(data.title);
   
}

function CardListViewModel() {
    // Data
    var self = this;
    self.cards = ko.observableArray([]);
   
                                
     //Load initial state from server, convert it to Card instances, then populate self.cards
    $.ajax("/echo/json/", {
        data: {
            json: ko.toJSON(fakeData)
        },
        type: "POST",
        dataType: 'json',
        success: function(data) {
            var mappedcards = $.map(data, function(item) {
                return new Card(item);
            });

            self.cards(mappedcards);
        }
    });                               
}

var fakeData = [{
    "title": "Wire the money to Panama",
    
    },
{
    "title": "Get hair dye, beard trimmer, dark glasses and \"passport\"",
    },
{
    "title": "Book taxi to airport",
    },
{
    "title": "Arrange for someone to look after the cat",
    }];

ko.applyBindings(new CardListViewModel());