JSFiddle

  • Get a remote virtual DOM structure as a view #7 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var viewString = '{tag: "div", attrs: {}, children: ["foo"]}';
    
    var Sqram = {
      vdom: m.prop(''),
    
      // fetch the view for this route
      getView: function ...
  • Only resolve a route based on the results of XHR XML #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    m.route( document.body, "/dashboard/johndoe", {
        "/dashboard/:userID": {
            controller : function(){
                return m.request( {
                    url         : "/echo/xml/",
                    deserialize : function( result ){
                        return ...
  • Avoid reinitialising controllers on route change #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    Overlay = {
        view: function() { 
            return m("div.overlay", ["overlay", m("a[href=/]", {config: m.route}, "close")])
        }
    }
    
        
    BigList = {
        controller: function() {
            this.max ...
  • m.attrs.bidi demo (component-mode) #3 is the latest revision

    How to use m.attrs.bidi https://github.com/barneycarroll/m.attrs.bidi

    // Component-mode is more resilient because it allows rebinding of the custom attribute.
    // Here we're keeping a reference to the ...
  • m.attrs.bidi demo #2 is the latest revision

    How to use m.attrs.bidi https://github.com/barneycarroll/m.attrs.bidi

    m.module( document.body, {
      controller : function(){
    		return {
                userName    : m.prop( '' ),
    			countries   : [ 'Canada', 'England', 'Germany' ],
    			userCountry : m.prop(),
    			sexes       : [ 'Male', 'Female ...
  • Mithril bidi binding as a component #2 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript

    // The data
    var signup = {
        countries   : [ 'Canada', 'England', 'Germany' ],
        userCountry : m.prop(),
        sexes       : [ 'Male', 'Female' ],
        userSex     : m.prop(),
        userContact : m.prop ...
  • Persistent controllers

    No-Library (pure JS), HTML, CSS, JavaScript

    m.route( document.body, '/', {
        '/:path...' : {
            controller : ( function closure( ctrl, initialised ){
                return function controller(){
                    ctrl.last = new Date().toString()
                    
                    if( !initialised ...
  • Persistent controllers #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    m.route( document.body, '/', {
        '/:path...' : {
            controller : ( function closure( store ){
                return function controller(){
                    if( store ) return store
                    
                    store = this;
                    
                    // Your real ...
  • Alert when nodes are added to the body

    No-Library (pure JS), HTML, CSS, JavaScript

    Object.prototype.assign = function( source ){
        for( var i = 1; i < arguments.length; i++ ){
            for( var key in arguments[ i ] ){
                if ...
  • Alert when nodes are added to the body

    No-Library (pure JS), HTML, CSS, JavaScript

    new MutationObserver( function onMutation( mutations ){
      mutations.filter( function notify( mutation ){
        return mutation.addedNodes.length
      } ).forEach( alert )
    } ).observe(
        document.body,
        { childList ...