EMBER WORKSHOP: Components

RSVP.hash, Controllers, Components

by jdcravens

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.12/ember-data.js"></script>
<script type="text/x-handlebars">
    <header> <code> Application </code> </header>
    {{outlet}}
    <footer> <code> Application </code> </footer>
    
     {{!-- Keep in mind we can have named outlets here that are populated by renderTemplate() in IndexRoute || LoginRoute --}}    
    
</script>

<script type="text/x-handlebars" data-template-name="index">
    <div class="wrapper">
    
        <p> <code> Index </code> </p>
        
        {{!-- {{render 'timeline' timeline}} --}}
        
        {{!-- {{partial timeline}} --}}
        
        {{! render for ObjectControllers and partial for ArrayControllers? Seems odd.}}
        
        {{render 'timeline'}}
        
        {{!-- Why does this context no longer work with new 'route switching context' changes in hbs? --}}
        {{!-- {{render 'categories' categories}} --}}
        
        {{!-- must pass model ... arg --}}
        {{render 'categories' model}}
        
        {{!-- this works if the IndexController is actively generated --}}
        {{!-- need to call _super() in init? --}}
        {{partial 'categories'}}
        
        {{!-- w/ #with and needs can accsess properties from other controllers        
        
    {{#with controllers.application as a}}
      {{a.currentPath}}
      {{a.currentRouteName}}
    {{/with}} --}}
        
     {{#with controllers.application as a}}
      {{a.currentPath}}
      {{a.currentRouteName}}
    {{/with}}
    
        {{!-- cant have outlets without a Router.map, so that there is a nested router here ... this includes named outlets}} --}}
        {{outlet 'dashboard'}}
         
    </div>
</script>
  
<script...

SCSS

body {
    font-family: Optima, serif;
}

code {
    color: gainsboro;
    background-color: ghostwhite;
}

.wrapper {
    overflow: hidden;
    padding: 10px;
}

.column {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding: 10px;
    border-right: 1px solid #ccc;
    &:last-child {
        border-right: none;
    }
}

JavaScript

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter;

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      timeline: {
        currentTime: new Date().toISOString()
      },
      categories: this.store.find('category')
    });
  }
  //renderTemplate: function () {
    //this.render('index');
    //this.render('dashboard', { outlet: 'dashboard' });
  //}
});


// Adding and IndexController kills {{partial 'categories'}} 
// Removing it, then makes categories accessible again
// ???
App.IndexController = Ember.Controller.extend({
  needs: ['application']
});

App.TimelineView = Ember.View.extend({
  templateName: 'timeline',
  tagName: 'section',
  classNames: ['column', 'timeline']
});

App.CategoriesView = Ember.View.extend({
  templateName: 'categories',
  tagName: 'section',
  classNames: ['column', 'categories']
});

App.TimelineController = Ember.Controller.extend({
  timeNow: Ember.computed(function() {
    return moment(this.get('currentTime')).format('l');
  })
});

App.Category = DS.Model.extend({
  categoryName: DS.attr('string'),
  description: DS.attr('string')
});

App.Category.FIXTURES = [
  {
    id: 1,
    categoryName: 'Category No.1',
    description: 'This is Category No.1'
  }, {
    id: 2,
    categoryName: 'Category No.2',
    description: 'This is Category No.2'
  }, {
    id: 3,
    categoryName: 'Category No.3',
    description: 'This is Category No.3'
  }
];