Lodestar-Ractive

A simple combination of the LodestarJs-router and Ractive, presented as a framework.

Two way data-binding

Hi my name is {{fullName}}, and I find this is so simple!

router.createRoute({
  path: '/',
  view: {
    el: '#target',
    template: '<input type="text" value="\{{fullName}}"/> Hi my name is \{{fullName}}, and I find this is so simple!'
  }
});

Simple Todo MVC

{{todo.items.length}} / {{todo.max}}

HTML
JavaScript

router.createRoute({
  path: '/',
  controller: {

    actions: {
      addTodo: function ( event, inputVal ) {
        if ( inputVal.length && this.get('todo.items').length < this.get('todo.max') ) {
          this.push( 'todo.items', { task: inputVal } );
          this.set('todo.input', '');
        }
        event.original.preventDefault();
      }
    }

  },
  view: {
    el: '#main-page',
    data: { 'todo': { 'items': [], 'max': 5 } },
    template: document.querySelector('#todo').innerHTML
  }
});

Easy Events

router.createRoute({
  path: '/',
  controller: {

    actions: {
      randomColor: function() {
         this.set('color', "#" + Math.random().toString(16).slice(2, 8));
      }
    }

  },
  view: {
    el: '#target',
    template: '<div id="random-color" style="background-color: \{{color}};"></div><button on-click="randomColor">click me</button>'
  }
});

Get HTML from other pages

This will pull in content without reloading the page.

To the example!

router.createRoute({
  path: '/example',
  controller: { },
  view: {
    el: '#target',
    template: {
      url: '/lodestar-ractive/example',
      container: 'main',
      notOnSame: true // Makes sure not to execute the request when on the page already
    }
  }
});

Simple Hierarchy with built-in "caching"

router.createRoute({
  path: '/',
  controller: {

    controller: function() {
      console.log('This is the index page.');
    }

  }

});

router.createRoute({
  path: '[/]blog',
  controller: {

    controller: function() {
      console.log('This is the child of that ^ index page.');
    }

  }
});

Progressively Enhance?

Although a simple example, you could do some simple progressive enhancement using this. Turn off JavaScript and have a look.

This site is written in Jekyll with the framework on top of it!

More examples coming soon!