var app = derby.createApp();
// convenience function for loading templates that are defined as <script type="text/template">
app.registerViews();

//allow us to easily explore derby from the console
window.APP = app;
window.MODEL = app.model

app.component('posts', Posts);
function Posts() {}
Posts.prototype.init = function(model) {
  // init is called at the time of instanciation
  model.setNull('selectedIndex', 0);
};
Posts.prototype.select = function(post,i) {
  // we've defined a view function, i.e. a function that can be called from the view
  console.log("selected:", i, post)
  this.model.set('selectedIndex', i);
};

var page = app.createPage();

// lets drive things by some data. this is of course 
page.model.set('_page.posts', [
  { title: "hello world", text: "hey hi how are you doing?"},
  { title: "where am i?", text: "oh thats right i'm here"},
  { title: "so reuseful", text: "derby!"},
]);

// page.getFragment gets the template we gave the id="body" to.
console.log("fragment", page.getFragment('body'))
// we append our main template into the #content div of our otherwise non-derby site
document.getElementById('content').appendChild(page.getFragment('body'))
// the main example uses the following code because it presumes the entire body should be rendered by derby
// document.body.appendChild(page.getFragment('body'));