Skip to content

Instantly share code, notes, and snippets.

@ASH-Michael
Last active July 31, 2019 01:08
Show Gist options
  • Save ASH-Michael/72432cda53c5d3349db3e405a596c918 to your computer and use it in GitHub Desktop.
Save ASH-Michael/72432cda53c5d3349db3e405a596c918 to your computer and use it in GitHub Desktop.
Link and Button Experimentation
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('index', { path: '/' }, function() {
this.route('route-one');
this.route('route-two');
this.route('route-three');
});
});
export default Router;
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
goToPageThree() {
this.transitionTo('/route-three');
},
alert() {
alert('hello');
}
}
});
import Ember from 'ember';
export default Ember.Route.extend({
});
import Ember from 'ember';
export default Ember.Route.extend({
});
import Ember from 'ember';
export default Ember.Route.extend({
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.links {
padding: 1rem;
width: 100%;
background: lightgrey;
}
.links .active {
color: red;
}
.links .disabled {
color: #666;
}
.links .passthrough {
opacity: 0.5;
}
<h1>Welcome to {{appName}}</h1>
{{outlet}}
<p>The gray box has an action that links to route three.</p>
<p>Link and bubble actions bubble and allow action on gray box.</p>
<div class="links" {{action 'goToPageThree'}}>
{{#link-to "index.route-one"}}Route One{{/link-to}}
{{#link-to "index.route-two"}}Route Two{{/link-to}}
<br>
{{#link-to "index.route-one" disabled=true}}Route One{{/link-to}}
{{#link-to "index.route-two" disabled=true}}Route Two{{/link-to}}
<br>
<button {{action 'alert'}}>Alert</button>
</div>
<p>Link and bubble actions do not bubble and so don't allow action on gray box.</p>
<div class="links" {{action 'goToPageThree'}}>
{{#link-to "index.route-one" bubbles=false}}Route One{{/link-to}}
{{#link-to "index.route-two" bubbles=false}}Route Two{{/link-to}}
<br>
{{#link-to "index.route-one" bubbles=false disabled=true}}Route One{{/link-to}}
{{#link-to "index.route-two" bubbles=false disabled=true}}Route Two{{/link-to}}
<br>
<button {{action 'alert' bubbles=false}}>Alert</button>
</div>
<p>Link and bubble actions do not bubble and so don't allow action on gray box.</p>
<div class="links" {{action 'goToPageThree'}}>
{{#link-to "index.route-one" class="passthrough"}}Route One{{/link-to}}
{{#link-to "index.route-two" class="passthrough"}}Route Two{{/link-to}}
<br>
{{#link-to "index.route-one" class="passthrough" disabled=true}}Route One{{/link-to}}
{{#link-to "index.route-two" class="passthrough" disabled=true}}Route Two{{/link-to}}
<br>
<button {{action 'alert' class="passthrough"}}>Alert</button>
</div>
<h2>Route:</h2>
{{outlet}}
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment