just another declarative pipedream vision of tomorrow

app.js

//
// # app.js
// 
// ### A hypothetical example of the lift.js js library
//
// ## What is this?
// Well, lift.js is a project I've been dreaming about for a long time.  
// It converts declarative, stylesheet-like javascript markup into functional logic & state components.
// These take the form of Backbone models, views, and collections, as described by Mast (https://github.com/balderdashy/mast)
//
// ## Who cares?  Why would you do this?
// I really like the idea of reducing the amount of duplicative code developers write.
// That starts with moving as much state and logic into a declarative format as possible, 
// so designers and new programmers can do this part of things themselves.
// Someday, if we eliminate the need for functions when coding a simple interactive UI,
// this behavior can be emulated using a simple GUI.  That's the future I see.
//
// ## How can I help?
// If you're interested in helping, or just learning more about where this is going and the current state of the project, 
// hit me up @mikermcneil on twitter
//
//

// For the HTML, see https://gist.github.com/mikermcneil/5226695



lift({
  
  // Augment elements which match the '.todos' selector with some functionality
  '.todos': {
    
    // When no todos exist yet, display this text
    emptyHtml: '<li>No todos yet. Lucky dog.</li>',
    
    // Listen for global events
    subscriptions: {
      
      // When the addTodo event is received, 
      // Create a new model in this collection using the event object
      // (DOM will be automatically rerendered)
      '%addTodo': '+'
    },
    
    // By defining a collection, this component becomes a tree
    collection: {
      
      // Hook up RESTful 'domain.com/todo' endpoint
      // (and listen for pubsub events if live socket is deteceted)
      url: '/todo'
    },
    
    // Registers .todo as the branch item
    item: '.todo'
  },
  
  // Register .new-todo input so that its state will be monitored when the user types
  '.new-todo': {},
  
  // Assign a click event to the submit button
  '.submit': {
    events: {
      // When clicked, 
      click: {
        // it will fire the global addTodo event
        '%addTodo': {
          // passing along an object built here 
          // which contains the value for todoText
          todoText: '.new-todo | value'
        }
      }
    }
  }
  
});

// c. Mike McNeil, 2012 - 2013