Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 22, 2016 05:24
Show Gist options
  • Save anonymous/7d5610af69c5d4c158eb to your computer and use it in GitHub Desktop.
Save anonymous/7d5610af69c5d4c158eb to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit Making active just one menu item // source http://jsbin.com/soloboweko
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Making active just one menu item">
<meta charset="utf-8">
<title>Ember Menu Links</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v2.4.2/ember.debug.js"></script>
<script src="http://builds.emberjs.com/tags/v2.4.2/ember-template-compiler.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
body {
margin: 20px;
}
.active {
background: blue;
color: #fff;
}
</style>
</head>
<body>
<div id='app'></div>
<script type="text/x-handlebars">
<h2>Hello</h2>
<ul>
<li>{{#link-to "index"}}Index{{/link-to}}</li>
<li>
All items
<ul>
<li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
<li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
</ul>
</li>
<li>
Group A
<ul>
<li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
</ul>
</li>
<li>
Group B
<ul>
<li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
</ul>
</li>
</ul>
<hr />
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
I am index.
</script>
<script type="text/x-handlebars" data-template-name="item">
I am item {{model}}.
</script>
<script id="jsbin-javascript">
'use strict';
var App = Ember.Application.create({
rootElement: '#app'
});
App.Router.map(function () {
this.route('item', { path: '/item/:item_id' });
});
App.ItemRoute = Ember.Route.extend({
model: function model(params) {
return params.item_id;
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Making active just one menu item">
<meta charset="utf-8">
<title>Ember Menu Links</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.emberjs.com/tags/v2.4.2/ember.debug.js"><\/script>
<script src="http://builds.emberjs.com/tags/v2.4.2/ember-template-compiler.js"><\/script>
</head>
<body>
<div id='app'></div>
<script type="text/x-handlebars">
<h2>Hello</h2>
<ul>
<li>{{#link-to "index"}}Index{{/link-to}}</li>
<li>
All items
<ul>
<li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
<li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
</ul>
</li>
<li>
Group A
<ul>
<li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
</ul>
</li>
<li>
Group B
<ul>
<li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
</ul>
</li>
</ul>
<hr />
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
I am index.
<\/script>
<script type="text/x-handlebars" data-template-name="item">
I am item {{model}}.
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
body {
margin: 20px;
}
.active {
background: blue;
color: #fff;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var App = Ember.Application.create({
rootElement: '#app'
});
App.Router.map(function() {
this.route('item', { path: '/item/:item_id' });
});
App.ItemRoute = Ember.Route.extend({
model: function(params) {
return params.item_id;
}
});</script></body>
</html>
Raw
jsbin.soloboweko.css
/* Put your CSS here */
body {
margin: 20px;
}
.active {
background: blue;
color: #fff;
}
Raw
jsbin.soloboweko.js
'use strict';
var App = Ember.Application.create({
rootElement: '#app'
});
App.Router.map(function () {
this.route('item', { path: '/item/:item_id' });
});
App.ItemRoute = Ember.Route.extend({
model: function model(params) {
return params.item_id;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment