Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 4, 2015 21:13
Show Gist options
  • Save anonymous/7bf15ce6a62bf78fd8e8 to your computer and use it in GitHub Desktop.
Save anonymous/7bf15ce6a62bf78fd8e8 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit // source http://emberjs.jsbin.com/cabaxucuso
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{time-ago style_width=width style_height='500px' style_background=background}}
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="components/time-ago">
<h1>bdsfkjds</h1>
<ul>
<li>width {{style_width}} </li>
<li> heigth {{style_height}}
</li>
<li> background {{style_background}}
</li>
</ul>
</script>
<script id="jsbin-javascript">
var App;
App = Ember.Application.create();
App.Router.map(function() {});
App.IndexRoute = Ember.Route.extend();
App.IndexController = Ember.Controller.extend({
width: '100px',
background: '#555',
test: (function() {
return Ember.run.later(this, function() {
this.set('width', '300px');
return this.set('background', 'red');
}, 2000);
}).on('init')
});
App.TimeAgoComponent = Ember.Component.extend({
_applyStylesToComponent: function(style) {
console.log(style);
this.$().css(style);
},
_setStyleObservers: function(style_keys) {
var component, static_style, _buildStyle, _correctProperty;
component = this;
_correctProperty = function(property) {
return property.replace('style_', '');
};
_buildStyle = function(style, property) {
var correctProperty, value;
value = component.get(property);
correctProperty = _correctProperty(property);
style[correctProperty] = value;
};
static_style = {};
style_keys.forEach(function(property) {
var propertyBinding;
if (/Binding$/.test(property)) {
propertyBinding = property.replace(/Binding$/, '');
component.registerObserver(component, propertyBinding, function() {
var style;
style = {};
_buildStyle(style, propertyBinding);
component._applyStylesToComponent(style);
});
return;
}
return _buildStyle(static_style, property);
});
this._applyStylesToComponent(static_style);
},
addStyleObservers: (function() {
var style_keys;
style_keys = Em.A();
Ember.keys(this).forEach(function(key) {
if (/style_/.test(key)) {
style_keys.pushObject(key);
}
});
return this._setStyleObservers(style_keys);
}).on('didInsertElement')
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"><\/script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
{{time-ago style_width=width style_height='500px' style_background=background}}
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
<\/script>
<script type="text/x-handlebars" data-template-name="components/time-ago">
<h1>bdsfkjds</h1>
<ul>
<li>width {{style_width}} </li>
<li> heigth {{style_height}}
</li>
<li> background {{style_background}}
</li>
</ul>
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create()
App.Router.map ()->
App.IndexRoute = Ember.Route.extend()
App.IndexController = Ember.Controller.extend
width: '100px'
background: '#555'
test: (()->
Ember.run.later @, ()->
@set 'width', '300px'
@set 'background', 'red'
, 2000
).on 'init'
App.TimeAgoComponent = Ember.Component.extend
_applyStylesToComponent: (style)->
console.log style
@$().css style
return
_setStyleObservers: (style_keys)->
component = @
_correctProperty = (property)->
property.replace 'style_', ''
_buildStyle = (style, property)->
value = component.get property
correctProperty = _correctProperty property # for css {width, heigth, etc...}
style[correctProperty] = value
return
static_style = {}
style_keys.forEach (property)->
if /Binding$/.test property
propertyBinding = property.replace /Binding$/, ''
component.registerObserver component, propertyBinding, ()->
style = {}
_buildStyle style, propertyBinding
component._applyStylesToComponent style
return
return
_buildStyle static_style, property
@_applyStylesToComponent static_style
return
addStyleObservers: (()->
style_keys = Em.A()
Ember.keys(@).forEach (key)->
if /style_/.test key
style_keys.pushObject key
return
@_setStyleObservers style_keys
).on 'didInsertElement'</script></body>
</html>
Raw
jsbin.cabaxucuso.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.cabaxucuso.js
var App;
App = Ember.Application.create();
App.Router.map(function() {});
App.IndexRoute = Ember.Route.extend();
App.IndexController = Ember.Controller.extend({
width: '100px',
background: '#555',
test: (function() {
return Ember.run.later(this, function() {
this.set('width', '300px');
return this.set('background', 'red');
}, 2000);
}).on('init')
});
App.TimeAgoComponent = Ember.Component.extend({
_applyStylesToComponent: function(style) {
console.log(style);
this.$().css(style);
},
_setStyleObservers: function(style_keys) {
var component, static_style, _buildStyle, _correctProperty;
component = this;
_correctProperty = function(property) {
return property.replace('style_', '');
};
_buildStyle = function(style, property) {
var correctProperty, value;
value = component.get(property);
correctProperty = _correctProperty(property);
style[correctProperty] = value;
};
static_style = {};
style_keys.forEach(function(property) {
var propertyBinding;
if (/Binding$/.test(property)) {
propertyBinding = property.replace(/Binding$/, '');
component.registerObserver(component, propertyBinding, function() {
var style;
style = {};
_buildStyle(style, propertyBinding);
component._applyStylesToComponent(style);
});
return;
}
return _buildStyle(static_style, property);
});
this._applyStylesToComponent(static_style);
},
addStyleObservers: (function() {
var style_keys;
style_keys = Em.A();
Ember.keys(this).forEach(function(key) {
if (/style_/.test(key)) {
style_keys.pushObject(key);
}
});
return this._setStyleObservers(style_keys);
}).on('didInsertElement')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment