var StoryView = View.extend({
  
  el: "#story",
  template: $("#story .template").html(),

  events: {
    "load img": "image_loaded"
  },
  
  initialize: function(){
    this.$content = this.$(".content")
    this.$loader = this.$(".loader")
    this.scroller = new IScroll('#story', app.iscroll_options)
  },

  show: function(){
    document.body.className = "story"
  },
  
  populate: function(data){
    this.data = data
    this.$loader.hide()
    this.$content.empty()
    // id title image[uri caption] body
    this.data.forEach(function(row){
      var t = this.template.replace(/{{image}}/, row.image.uri)
                           .replace(/{{date}}/, row.date)
                           .replace(/{{title}}/, row.title)
                           .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
      this.$content.append(t)
    }.bind(this))
  },
  
  image_loaded: function(){
  },

})