EMBER WORKSHOP: Components simple (custom element)

simple Components example (custom element)

by jdcravens

HTML

<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 type="text/x-handlebars">

    {{outlet}}

</script>

<script type="text/x-handlebars" data-template-name="index">
    {{#each m in models}}
        {{category-item name=m.categoryName description=m.description}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="components/category-item">
    <p> <strong> {{name}} </strong> </p>
    <p> <em> {{description}} </em> </p>
</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

var App;

// This will be simple components

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
    model: function(){
        var model = {"models": [
      {
        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'
      }
       ]}
     return model;  
    }
});