alexlafroscia

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    throw new Error('this is an error');
  }
});

alexlafroscia

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    'update-value'(value) {
       this.set('value', value);
    }
  }
});

alexlafroscia

import Ember from 'ember';

const BlogCommentComponent = Ember.Component.extend({
});

BlogCommentComponent.reopenClass({
  positionalParams: ['comment']
});

export default BlogCommentComponent;

alexlafroscia

This is the child component!

alexlafroscia

import Ember from 'ember';
import connect from 'ember-redux/components/connect';

const stateToComputed = (state) => {
  return {
    numberOfTypes: state.cart.length,
    totalCartCount: state.cart.reduce((totalCount, product) => totalCount += product.count, 0),
    cartItems: state.cart
  };
};

alexlafroscia

ShadyCSS Skate.js Mixin

Out of the box, Skate.js doesn't work that well with ShadyCSS. This is a mixin that helps bridge the gap.

Usage

The usage example below assumes you're using a build tool like Webpack to transform a CSS file into a string when loaded.

import Component from 'skatejs';

alexlafroscia

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  popoverVisible: false,
  
  actions: {
    showPopover() {
      this.set('popoverVisible', true);

alexlafroscia

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

alexlafroscia

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

alexlafroscia

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

function asyncComputed(...deps) {
  let taskFn = deps.pop();
  let fn = task(taskFn).restartable().toFunction();
  return Ember.computed(...deps, function() {
    let args = deps.map(dep => this.get(dep));
    return fn(...args);
  });