/* MagJS Example - Dynamic Element as Node */

​

​

//Html in JS is ugly, but some edge cases require it

//E.g. non-document (unattached) dom manipulation:

​

​

//Module:

var component = {

  view: function(state, props) {

    console.log(props.randomer)

    state.h2 = 'Hello ' + props.name + '!';

    state.random = props.randomer;

    state.button = {

      _onClick: function() {

        props.randomer = Math.random();

      }

    };

  }

};

​

//Props:

var props = {

  name: 'Mike'

};

​

//Generate Html:

var dom = affix('div#test h2[html="Hiya"] > random');

dom.affix('button[html="Click!"]');

​

//Run module with dom node:

var mod = mag.module(dom, component, props);

​

//Inspect the html to verify only the changed elements are being updated

//Reference element (not cloned) can be used and updated anywhere

//Attach dom node to document now or later

document.getElementById('mount').appendChild(dom);

​

mod.subscribe(function(state, props, node, previous) {

  console.log(state, props, node.innerHTML, previous);

  //Node Can be output as string and used elsewhere: 

  //E.g. conversion of Html to another format e.g. JSONML, XML, JSON .. 

  //document.getElementById('mount').appendChild(dom[0]);

});