Session 3: Object

event-fict-hb.js

var event1 = {
  title: "Olympics",
  rating: 250,
  ficticious: true
};
 
var event2 = {
  title: "Fall of Berlin Wall",
  rating: 100,
  ficticious: false
};
 
var event3 = {
  title: "Invention of the Turing Machine",
  rating: 500,
  ficticious: true
};
 
var event4 = {
  title: "Marijn's Birthday",
  rating: 400,
  ficticious: true
};
 
var event5 = {
  title: "Thomas' Visit",
  rating: 450,
  ficticious: false
};
 
var events = {events: [event1, event2, event3, event4, event5]};

// Transform Document into Template by substituting values with variables

var rawHTML = "<div class='events'>{{#each events}}{{#if ficticious}}<div style='width:{{rating}}px; background-color:red'>{{title}}</div>{{else}}<div style='width:{{rating}}px; background-color:green'>{{title}}</div>{{/if}}{{/each}}</div>"

var template = Handlebars.compile(rawHTML);
 
// Make new Documents (snippets) by Inserting Objects into Template

var renderedTemplate = template(events);

// Insert Documents (snippets) into Page

$('.main').append(renderedTemplate);

events-hb.js

var event1 = {
  title: "Olympics",
  rating: 250,
  ficticious: true
};
 
var event2 = {
  title: "Fall of Berlin Wall",
  rating: 100,
  ficticious: false
};
 
var event3 = {
  title: "Invention of the Turing Machine",
  rating: 500,
  ficticious: true
};
 
var event4 = {
  title: "Marijn's Birthday",
  rating: 400,
  ficticious: true
};
 
var event5 = {
  title: "Thomas' Visit",
  rating: 450,
  ficticious: false
};
 

var events = {events: [event1, event2, event3, event4, event5]};

// Transform Document into Template by substituting values with variables
 
var rawHTML = "<div class='events'>{{#each events}}<div style='width:{{rating}}px; background-color:red'>{{title}}</div>{{/each}}</div>"

var template = Handlebars.compile(rawHTML);

// Make new Documents (snippets) by Inserting Objects into Template

var renderedTemplate = template(events);

// Insert Documents (snippets) into Page

$('.main').append(renderedTemplate);

events.js

var event1 = {
  title: "Olympics",
  rating: 250,
  ficticious: true
};

var event2 = {
  title: "Fall of Berlin Wall",
  rating: 100,
  ficticious: false
};

var event3 = {
  title: "Invention of the Turing Machine",
  rating: 500,
  ficticious: true
};

var event4 = {
  title: "Marijn's Birthday",
  rating: 400,
  ficticious: true
};

var event5 = {
  title: "Thomas' Visit",
  rating: 450,
  ficticious: false
};

var events = [event1, event2, event3, event4, event5]

// Insert a container element into the page

$('.main').append('<div class="events"></div>');


// Iterate over the elements of a collection and transform them into HTML snippets

var renderedEvents = $(events).map(function(index, event) {
  return "<div style='width:" + event.rating + "px; background-color:red'>" + event.title + "</div>"
});


// Join the snippets together into a string

var eventString = renderedEvents.toArray().join("");

// Insert Documents (snippets) into Page

$('.events').append(eventString);