A Backbone.js Playground

a playground setup with includes of backbone, jquery, underscore,...

by fguillen

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script type="text/template" id="slide_template">
  <label>Presentation <%= presentation_name %>  </label> <br/>
  <img src="<%= imageurl %>" id="slide_pic" /> <br/>
  <textarea id="slide_content">
    <%= slide_content %>
  </textarea>
  <div id="next">next slide </div>
  <div id="previous">previous slide </div>  
</script>

JavaScript

var Slide = Backbone.Model.extend({
    defaults: {
        castid  :1,
        id      :1
    },
    urlRoot:  function(){
        return 'slidecasts/' + this.get("castid") + '/slides/';
    },
});


var SlideView = Backbone.View.extend({
    el: $("#presentation"),
    events: {
        'click #next': 'next',
        'click #previous': 'previous',
    },
    initialize: function(){
        _.bindAll(this, 'render', 'next');
        this.model.bind('change', this.render);
        this.render();
    },
    render: function(){
        this.model.fetch();
        var variables = { 
            presentation_name: "This is a Slide-Number: ",
            slidenumber: "xxx",
            imageurl:  this.model.url() +"/"+ this.model.get('imageLinks'), 
            slide_content:  this.model.get("content")};
        var template = _.template( $("#slide_template").html(), variables );
        this.$el.html( template );
        return this;
    },
    next: function(){
        console.log(this.model.id);
        this.model.nextslide();
    },
    previous: function(){
        console.log("previous function in view");
    }
});

testslide = new Slide();
var slideView = new SlideView({model: testslide});