Skip to content

Instantly share code, notes, and snippets.

@zaius
Forked from KTKate/components.my-component.js
Last active August 29, 2015 14:26
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 zaius/242843d2fd25a6a3d916 to your computer and use it in GitHub Desktop.
Save zaius/242843d2fd25a6a3d916 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
const {computed} = Ember;
export default Ember.Component.extend({
tagName: 'a',
_setupDropdown: Ember.on('didInsertElement', function() {
this._super.apply(this, arguments);
Ember.run.scheduleOnce('afterRender', this, function() {
this.$().attr('data-activates', this.get('_dropdownContentId'));
this.$().dropdown();
});
}),
_dropdownContentId: Ember.computed('elementId', function(){
console.log('I AM', this)
return this.get('elementId') + '-dropdown';
})
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle'
});
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a class="brand-logo">Logo</a>
<ul class="right">
<li>{{#my-component text='Dropdown'}}
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
{{/my-component}}</li>
</ul>
</div>
</nav>
</div>
<br>
{{#my-component text='Buttonless Dropdown'}}
<li><a href="#!">NOT ONE</a></li>
<li><a href="#!">NOT TWO</a></li>
<li class="divider"></li>
<li><a href="#!">NOT THREE</a></li>
{{/my-component}}
{{text}}
<ul id="{{_dropdownContentId}}" class="dropdown-content">
{{yield}}
</ul>
{
"version": "0.4.6",
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember-template-compiler.js",
"materialize-css": "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css",
"materialize-js": "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment