Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <title>Ist heute Maschinendeck Treffen?</title>
  <style>
    body {
      text-align: center;
      font-family: Helvetica;
    }
    #state {
      font-size: 25px;
    }
  </style>
</head>
<body>
  <h1>Ist heute Maschinendeck Treffen?</h1>
  <div id="state"></div>
  <script>
    document.querySelector('#state').innerHTML = ((new Date()).getDay() === 3) ? "Ja" : "Nein";
  </script>
</body>
</html>
 
​
(function () {
​
  var TODOModel = Promenade.Model.extend({
    type: 'todo',
    defaults: {
      done: false,
      description: ''
    }
  });
​
  var TODOCollection = Promenade.Collection.extend({
    model: TODOModel
  });
​
  var TODOController = Promenade.Controller.extend({
    defineRoutes: function () {
      this.handle('', 'defaultRoute');
      this.handle('create', 'createTodo');
    },
  
    defaultRoute: function () {
      this.app.redirect('create');
    },
  
    createTodo: function () {
      this.app.view.contentRegion.show(new TODOListView({
        collection: this.app.todoCollection
      }));
    }
  });
  
  var TODONewView = Promenade.View.extend({
    tagName: 'form',
    template: 'new',
    events: {
      'submit': 'handleSubmit'
    },
    handleSubmit: function (e) {
      this.collection.add(new TODOModel({
        description: this.getDescriptionText()
      }));
      
      // Cancel the default form behavior:
      return false;
    },
    getDescriptionText: function () {
      return this.$el.find('input').val();
    }
  });
  
  var TODOItemView = Promenade.View.extend({
    tagName: 'li',
    template: 'item',
    events: {
      'click input': 'toggleDone'
    },
    toggleDone: function () {
      this.model.set(
        'done',
        !this.model.get('done')
      );
      
      this.$el.toggleClass(
        'done',
        this.model.get('done')
      );
    }
  });
  
  var TODOListView = Promenade.CollectionView.extend({
    tagName: 'div',
    template: 'list',
    layout: {
      'new': '.new-region',
      'outlet': '.outlet-region'
    },
    itemClass: TODOItemView,
    initialize: function () {
      Promenade.CollectionView.prototype.initialize.apply(this, arguments);
      this.newRegion.show(new TODONewView({
        collection: this.collection
      }));
    }
  });
​
  var TODOApplication =   Promenade.Application.extend({
    models: [
      TODOCollection
    ],
    controllers: [
      TODOController
    ],
    view: Promenade.View.extend({
      el: document.body,
      layout: {
        'content': ''
      }
    })
  });
​
  window.app = new TODOApplication();
  
  app.initializes.then(function () {
    Backbone.history.start();
    
    console.log('Done!');
  });
​
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gronkepro
0viewers