Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 25, 2015 23:45
Show Gist options
  • Save anonymous/910fd62d5ee33be21832 to your computer and use it in GitHub Desktop.
Save anonymous/910fd62d5ee33be21832 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin j2c mithril demo // source http://jsbin.com/qoxaze
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="j2c mithril demo">
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://rawgit.com/lhorie/mithril.js/next/mithril.min.js"></script>
<script src="https://rawgit.com/pygy/j2c/next/dist/j2c.global.js"></script>
</head>
<body>
<script id="jsbin-javascript">
//- lib -------------------
var styles = '';
var liveStyles = '';
var styler = {
liveUpdate: function(style) {
var scopedStyle = j2c.sheet(style);
liveStyles += scopedStyle;
return scopedStyle;
},
attach: function(style) {
var scopedStyle = j2c.sheet(style);
console.log("scopedStyle", scopedStyle)
styles += scopedStyle;
return scopedStyle;
},
view: function() {
var el = [m('style', styles),m('style', liveStyles)];
liveStyles = '';
return el;
}
};
//- some module -------------------
var cls = styler.attach({
'.foo': {
background: 'blue'
},
});
console.log('cls',cls)
var d=styler.attach({
".bar":{
color:'red'
}
});
console.log('d', d, 1234, styles)
function someRandomView() {
return m('span.' + cls.foo, 'Some random content');
}
function someDynamiclyStlyedView(scope) {
var cls = styler.liveUpdate({
'.bar': { background: scope.background }
});
return m('span.' + cls.bar, 'Some blinky stuff content');
}
//- main view -------------------
m.mount(document, {
controller: function() {
var scope = {
background: 'red'
};
setInterval(function() {
scope.background = scope.background === 'red' ? 'green' : 'red';
m.redraw();
}, 100010);
return scope;
},
view: function(scope) {
return [
someRandomView(),
someDynamiclyStlyedView(scope),
styler.view()
];
}
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">//- lib -------------------
var styles = '';
var liveStyles = '';
var styler = {
liveUpdate: function(style) {
var scopedStyle = j2c.sheet(style);
liveStyles += scopedStyle;
return scopedStyle;
},
attach: function(style) {
var scopedStyle = j2c.sheet(style);
console.log("scopedStyle", scopedStyle)
styles += scopedStyle;
return scopedStyle;
},
view: function() {
var el = [m('style', styles),m('style', liveStyles)];
liveStyles = '';
return el;
}
};
//- some module -------------------
var cls = styler.attach({
'.foo': {
background: 'blue'
},
});
console.log('cls',cls)
var d=styler.attach({
".bar":{
color:'red'
}
});
console.log('d', d, 1234, styles)
function someRandomView() {
return m('span.' + cls.foo, 'Some random content');
}
function someDynamiclyStlyedView(scope) {
var cls = styler.liveUpdate({
'.bar': { background: scope.background }
});
return m('span.' + cls.bar, 'Some blinky stuff content');
}
//- main view -------------------
m.mount(document, {
controller: function() {
var scope = {
background: 'red'
};
setInterval(function() {
scope.background = scope.background === 'red' ? 'green' : 'red';
m.redraw();
}, 100010);
return scope;
},
view: function(scope) {
return [
someRandomView(),
someDynamiclyStlyedView(scope),
styler.view()
];
}
});</script></body>
</html>
Raw
jsbin.qoxaze.js
//- lib -------------------
var styles = '';
var liveStyles = '';
var styler = {
liveUpdate: function(style) {
var scopedStyle = j2c.sheet(style);
liveStyles += scopedStyle;
return scopedStyle;
},
attach: function(style) {
var scopedStyle = j2c.sheet(style);
console.log("scopedStyle", scopedStyle)
styles += scopedStyle;
return scopedStyle;
},
view: function() {
var el = [m('style', styles),m('style', liveStyles)];
liveStyles = '';
return el;
}
};
//- some module -------------------
var cls = styler.attach({
'.foo': {
background: 'blue'
},
});
console.log('cls',cls)
var d=styler.attach({
".bar":{
color:'red'
}
});
console.log('d', d, 1234, styles)
function someRandomView() {
return m('span.' + cls.foo, 'Some random content');
}
function someDynamiclyStlyedView(scope) {
var cls = styler.liveUpdate({
'.bar': { background: scope.background }
});
return m('span.' + cls.bar, 'Some blinky stuff content');
}
//- main view -------------------
m.mount(document, {
controller: function() {
var scope = {
background: 'red'
};
setInterval(function() {
scope.background = scope.background === 'red' ? 'green' : 'red';
m.redraw();
}, 100010);
return scope;
},
view: function(scope) {
return [
someRandomView(),
someDynamiclyStlyedView(scope),
styler.view()
];
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment