ripple 0.6

alt.js

var ripple = require('ripple');
var binder = require('binder');
var template = require('./template.html');

// Data-binding engine
var bindings = binder(template)
  .use(someDirective)
  .use(someFiltersAndShit);

var View = ripple()
  .engine(bindings)
  .attr('firstName')
  .attr('lastName');
  
module.exports = View.extend({
  initialize: function(){
    console.log('initializing a view!');
  },
  onClick: function(event){
    console.log('clicked!'); 
  }
});

bindings.js

var ripple = require('ripple');
var binder = require('binder');
var template = require('./template.html');

// Data-binding engine
var bindings = binder(template)
  .use(someDirective)
  .use(someFiltersAndShit);

var View = ripple({
  initialize: function(){
    console.log('initializing a view!');
  },
  onClick: function(event){
    console.log('clicked!'); 
  }
});

View
  .engine(bindings)
  .attr('firstName')
  .attr('lastName');
  
module.exports = View;

es6.js

import ripple from 'ripple';
import binder from 'binder';
import template from './template';

var bindings = binder()
  .use(someDirective)
  .use(someFiltersAndShit);

var Base = ripple()
  .engine(bindings(template))
  .attr('firstName')
  .attr('lastName');
  
exports class View extends Base {
  constructor() {
    super();
    console.log('initializing a view!');
  },
  onClick(event) {
    console.log('clicked!');
  }
}

virtual.js

var ripple = require('ripple');
var virtual = require('virtual');
var template = require('./template');

var View = ripple({
  initialize: function(){
    console.log('initializing a view!');
  },
  onClick: function(event){
    console.log('clicked!'); 
  }
});

View
  .engine(virtual(template))
  .attr('firstName')
  .attr('lastName');
  
module.exports = View;

I'm pretty out of the loop with state-of-the-art client-side views now haha, not sure if react has anything in interesting to draw from, looks similar to what we have always been trying to do with ripple/reactive but with the gross inline e4x-ish syntax.

I'd be +1 for prototype stuff, especially since ES6 classes (as retarded as they are) is already a little DSL, and +1 on regular .on() for events. Not sure I'd have events on the constructor, maybe both would be helpful, I think that's what we did at cloudup but I can't remember too well now.

Are web component templates somewhat usable now? Might be worth going that direction to future-proof a bit

Ok, maybe constructor is the way to go then:

import ripple from "ripplejs/ripple";
import binding from "ripplejs/binding-engine";
export ViewModel;

// The class for the template handles things like returning the 
// template string/function, hooking up DOM functionality on mount/destroy,
// the handlers for user interaction with the DOM.
class View {
  constructor(attrs) {
    // do initialisation stuff here
    this.name = attrs.name || 'default name';
  }
  render() {
    return '<div></div>';
  }
  onSubmit(event) {
    event.preventDefault();
    this.name = 'foo';
    this.submit();
  }
  onMount() {
    // will automatically get added as a 'mounted' callback
  }
  onDestroy() {
    // will automatically get called on 'destroyed' event
  }
}

// Create View wrapper. Setting the engine type here automatically
// uses the plugin for the engine type which adds methods to the view.
var ViewModel = ripple(View)
  .engine(binding); // binding, string, or virtual

// Define attributes that define the state of the view
// These work the same as models so plugins can get to the
// options for each attribute to add extra functionality.
ViewModel
  .attr('name', { required: true, type: 'string' })
  .attr('email', { required: true, type: 'email' })

// Add plugins that can add directives, helpers, etc.
ViewModel
  .use(emailTypePlugin)
  .use(someDirectives)

// Lifecycle events of the view. Whenever the view is created,
// destroyed, or added and removed from the DOM an event is fired.
ViewModel
  .on('create', function(view, attributes){});
  .on('mount', function(view, parent){});
  .on('unmount', function(view){});

This works a little better since we're really dealing with a template and not the view. Separating those two seems to get rid of the confusion a bit.