XBMCMM Ember.js Intro (Emblem)

by gugahoi

HTML

<script src="https://s3.amazonaws.com/machty/emblemtest/emblem.js"></script>
<script src="https://s3.amazonaws.com/machty/emblemtest/ember.js"></script>
<script src="http://www.thetravellingbarman.com.au/scripts/ember-data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script type="text/x-emblem" data-template-name="application">
  .navbar.navbar-inverse.navbar-fixed-top
    .navbar-inner
      a.brand href="#" XBMCMM
      ul.nav
        li
          a href="#" Home
        linkTo "movies" tagName="li"
          a href="#" Movies
        linkTo "tv" tagName="li"
          a href="#" TV
    
  .container-fluid
    .row-fluid
      .span12 = outlet
</script>

<script type="text/x-emblem" data-template-name="movies">
  .row-fluid
    #moviesSidebar.span3 = partial "movieMenu"
    #moviesContent.span9
      .well = outlet
</script>

<script type="text/x-emblem" data-template-name="movies/index">
  h2 Select a movie on the sidebar
</script>

<script type="text/x-emblem" data-template-name="_movieMenu">
    
  Em.TextField valueBinding="filter" class="span12" placeholder="Filter"
    
  ul.unstyled.well
    each movie in filteredMovies
      li
        linkTo "movie" movie
          movie.name
</script>

<script type="text/x-emblem" data-template-name="movie">
  p {{movie.name}} {{movie.rating}} 
  img src=movie.imageUrl
      
</script>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 body {
    margin-top: 60px;
}
.navbar .brand {
    margin-left: 0;
}
#moviesSidebar ul li {
    padding: 10px;
    line-height: 20px;
    height: 20px;
}
#moviesSidebar ul li:hover, #moviesSidebar ul li.active {
    background-color: #0051ff;
    color: white;
    cursor: pointer;
}
.hidden {
    display: none;
}

JavaScript

/*global App*/
'use strict';
window.App = Ember.Application.create();

// Router
App.Router.map(function() {
  this.resource('movies', function() {
    this.resource('movie', { path: ':movie_id' });
  });
  this.resource('tv');
});

App.MoviesRoute = Ember.Route.extend({
  model: function() {
    return App.Movies.find();
  }
});

App.MovieRoute = Ember.Route.extend({
  model: function() {
    return App.Movie.find();
  }
});

// Controllers
// Implement explicitly to use the object proxy.
App.MoviesController = Ember.ArrayController.extend({
  filter: '',
  sortProperties: ['name'],
  filteredMovies: function() {
      var filter = this.get('filter').toLowerCase();
      var content = this.get('content');
      if(!filter) { return content; }
      return content.filter(function(item, idx) {
          return item.get('name').toLowerCase().indexOf(filter) !== -1;
      }, this);
  }.property('content', 'filter')
});

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.FixtureAdapter'
});

App.Movies = DS.Model.extend({
  movieList: DS.hasMany('App.Movie')
});

App.Movie = DS.Model.extend({
  movie: DS.belongsTo('App.Movies')
});

App.Movies = DS.Model.extend({
  name: DS.attr('string'),
  isHidden: DS.attr('boolean')
});

App.Movie = DS.Model.extend({
  name: DS.attr('string'),
  imageUrl: DS.attr('string'),
  rating: DS.attr('number'),
});

App.Movies.FIXTURES = [{
  id: 1,
  name: 'Batman Begins',
  isHidden: false
}, {
  id: 2,
  name: 'Spiderman',
  isHidden: false
}, {
  id: 3,
  name: 'Superman',
  isHidden: false
}, {
  id: 4,
  name: 'Aquaman',
  isHidden: false
}, {
  id: 5,
  name: 'Green Lantern',
  isHidden: false
}];

App.Movie.FIXTURES = [{
  id: 1,
  name: 'Batman Begins',
  imageUrl: 'img/pizza.png',
  rating: 10
}, {
  id: 2,
  name: 'Spiderman',
  imageUrl: 'img/pancakes.png',
  rating: 10
}, {
  id: 3,
  name: 'Superman',
  imageUrl: 'img/fries.png',
  rating: 10
}, {
  id: 4,
  name: 'Aquaman',
  imageUrl: 'img/hotdog.png',
...