Skip to content

Instantly share code, notes, and snippets.

@lordkada

lordkada/index.html

Last active August 29, 2015 14:26
Show Gist options
  • Save lordkada/ff0326f3f302d4fa00fc to your computer and use it in GitHub Desktop.
Save lordkada/ff0326f3f302d4fa00fc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.5/ember.debug.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars">
<h2>Nesting components</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#tab-menu name="my-menu" action='selectTabMenu'}}
{{#tab-menu-item name="menu-item-1"}}
First Item
{{/tab-menu-item}}
{{#tab-menu-item name="menu-item-2"}}
Second item
{{/tab-menu-item}}
{{/tab-menu}}
</script>
<script type="text/x-handlebars" data-template-name="components/tab-menu">
<div role="tabpanel">
<ul class="nav" role="tablist">
{{yield}}
</ul>
</div>
</script>
<script type="text/x-handlebars" data-template-name="components/tab-menu-item">
<li>
<a {{action 'selectTabMenu'}}>
{{yield}}
</a>
</li>
</script>
<script id="jsbin-javascript">
"use strict";
App = Ember.Application.create();
App.Router.map(function () {});
App.IndexController = Ember.Controller.extend({
actions: {
selectTabMenu: function selectTabMenu(name) {
console.log("Selected TabMenu from index controller: " + name);
}
}
});
App.TabMenuComponent = Ember.Component.extend({
actions: {
selectTabMenu: function selectTabMenu(name) {
console.log("Selected TabMenu from TabMenu component: " + name);
}
}
});
App.TabMenuItemComponent = Ember.Component.extend({
action: "selectTabMenu",
targetObject: Em.computed.alias("parentView"),
actions: {
selectTabMenu: function selectTabMenu() {
console.log("Selected tab from tab-menu-item: " + this.get("name"));
this.sendAction("action", this.get("name"));
}
}
});
// put your routes here
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.13.5/ember.debug.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars">
<h2>Nesting components</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
{{#tab-menu name="my-menu" action='selectTabMenu'}}
{{#tab-menu-item name="menu-item-1"}}
First Item
{{/tab-menu-item}}
{{#tab-menu-item name="menu-item-2"}}
Second item
{{/tab-menu-item}}
{{/tab-menu}}
<\/script>
<script type="text/x-handlebars" data-template-name="components/tab-menu">
<div role="tabpanel">
<ul class="nav" role="tablist">
{{yield}}
</ul>
</div>
<\/script>
<script type="text/x-handlebars" data-template-name="components/tab-menu-item">
<li>
<a {{action 'selectTabMenu'}}>
{{yield}}
</a>
</li>
<\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexController = Ember.Controller.extend({
actions: {
selectTabMenu(name) {
console.log("Selected TabMenu from index controller: " + name);
}
}
});
App.TabMenuComponent = Ember.Component.extend({
actions: {
selectTabMenu(name) {
console.log("Selected TabMenu from TabMenu component: " + name);
}
}
});
App.TabMenuItemComponent = Ember.Component.extend({
action: 'selectTabMenu',
targetObject: Em.computed.alias('parentView'),
actions: {
selectTabMenu() {
console.log("Selected tab from tab-menu-item: " + this.get("name") );
this.sendAction('action', this.get("name"));
}
}
});
</script></body>
</html>
Raw
jsbin.tomobofimo.js
"use strict";
App = Ember.Application.create();
App.Router.map(function () {});
App.IndexController = Ember.Controller.extend({
actions: {
selectTabMenu: function selectTabMenu(name) {
console.log("Selected TabMenu from index controller: " + name);
}
}
});
App.TabMenuComponent = Ember.Component.extend({
actions: {
selectTabMenu: function selectTabMenu(name) {
console.log("Selected TabMenu from TabMenu component: " + name);
}
}
});
App.TabMenuItemComponent = Ember.Component.extend({
action: "selectTabMenu",
targetObject: Em.computed.alias("parentView"),
actions: {
selectTabMenu: function selectTabMenu() {
console.log("Selected tab from tab-menu-item: " + this.get("name"));
this.sendAction("action", this.get("name"));
}
}
});
// put your routes here
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment