EmberScreencasts 62 

ES2015 Modules

code sharing with import and export

Before Modules

<script src="jquery" />
<script src="ember" /> <!-- load AFTER jquery but BEFORE the rest of the app -->
<script src="models/salsa" />
<script src="models/taco" />


<!-- DO NOT CHANGE ORDERING WITHOUT TALKING TO SENIOR TACO ARCHITECT -->
<!-- TODO (before end of 2013!): make integration test, nag about running integration test -->

//app/models/taco.js
import Ember from 'ember';

export default Ember.Object.extend({
  tortilla: 'corn',
  toppings: ['fish', 'aioli', 'guac']
})

//app/utils/salsas.js
import Salsa from 'app/models/salsa';

export var doña = function(){
  return Salsa.create({spiceLevel: 3});
};

export var verde = function(){
  return Salsa.create({spiceLevel: 1});
};

export var roja = function(){
  return Salsa.create({spiceLevel: 2});
};
export default roja;

//app/utils/salsas.js
import Salsa from 'app/models/salsa';

export var doña = function(){
  return Salsa.create({spiceLevel: 3});
};

export var verde = function(){
  return Salsa.create({spiceLevel: 1});
};

export var roja = function(){
  return Salsa.create({spiceLevel: 2});
};
export default roja;

//app/components/taco-deli.js
import Ember from 'ember';
import Taco from 'appName/models/taco';
import roja from 'appName/utils/salsa';

export default Ember.Component.extend({
  newTaco() {
    return Taco.create({salsa: roja})
  }
})

//app/utils/salsas.js
import Salsa from 'app/models/salsa';

export var doña = function(){
  return Salsa.create({spiceLevel: 3});
};

export var verde = function(){
  return Salsa.create({spiceLevel: 1});
};

export var roja = function(){
  return Salsa.create({spiceLevel: 2});
};
export default roja;

//app/components/taco-deli.js
import Ember from 'ember';
import Taco from 'appName/models/taco';
import {roja, doña, verde} from 'appName/utils/salsa';

export default Ember.Component.extend({
  newTaco() {
    return Taco.create({salsa: roja})
  }
})

//app/utils/salsas.js
import Salsa from 'app/models/salsa';

export var doña = function(){
  return Salsa.create({spiceLevel: 3});
};

export var verde = function(){
  return Salsa.create({spiceLevel: 1});
};

export var roja = function(){
  return Salsa.create({spiceLevel: 2});
};
export default roja;

//app/components/taco-deli.js
import Ember from 'ember';
import Taco from 'appName/models/taco';
import roja, {doña, verde} from 'appName/utils/salsa';

export default Ember.Component.extend({
  newTaco() {
    return Taco.create({salsa: roja})
  }
})