Skip to content

Instantly share code, notes, and snippets.

@thierry-rietsch

thierry-rietsch/index.html

Created October 4, 2012 10:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thierry-rietsch/3832764 to your computer and use it in GitHub Desktop.
Save thierry-rietsch/3832764 to your computer and use it in GitHub Desktop.
Download ZIP
Stackoverflow Issue 12706031
Raw
index.html
<html>
<head>
<title>Stackoverflow Issue</title>
<style type="text/css">
.blocks-container {
width: 30em;
height: 30em;
border:2px solid #566789;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.7;
filter:alpha(opacity=80);
margin: 0.5em;
}
.block {
display: block;
float: left;
border:1px solid #779989;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
line-height:5em;
text-align:center;
z-index:20;
background-color:#FFC000;
color:black;
font-family:helvetica;
padding:0.5em;
margin: 0.5em;
font-size:0.9em;
}​
</style>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>Application</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="blocki" >
{{name}}
{{#each children}}
{{view App.BlocksView blockiBinding="this"}}
{{/each}}
</script>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/handlebars-1.0.0.beta.6.js"></script>
<script src="js/ember-1.0.pre.js"></script>
<script src="js/myapplication.js"></script>
</body>
</html>
Raw
myapplication.js
window.App = Ember.Application.create();
App.ApplicationView = Ember.View.extend({ templateName: 'application' });
App.ApplicationController = Ember.Controller.extend();
App.BlocksView = Ember.View.extend({
tagName: 'div',
classNames: ['block'],
templateName: 'blocki'
})
App.BlocksController = Ember.ObjectController.extend();
App.testData = {
"name": "main page",
"children": [
{
"name": "Block 1",
"children": [
{ "name": "Block 1.1" },
{ "name": "Block 1.2" }
]
},
{
"name": "Block 2",
"children": [
{
"name": "Block 2.1",
"children": [
{
"name": "Block 2.1.1",
"children": [
{ "name": "Block 2.1.1.1" }
]
}
]
}
]
}
]
};
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
blocks: Ember.Route.extend({
route: "/",
connectOutlets: function(router, context) {
router.get("applicationController").connectOutlet("blocks", App.testData);
console.log("connecting blocks outlets");
}
})
})
});
App.initialize();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment