Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember.js v1.0.0-pre.2-370-g6a165ad" />
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
  <script src="http://cl.ly/code/1h2K0L2f0P0u/ember.js"></script>
  <script>
  </script>
</head>
<body>
  <script type="text/x-handlebars">
    <h1>Application Template</h1>
    <ul>
    {{#view App.NavView}}
      {{#linkTo "about"}}About{{/linkTo}}
    {{/view}}
    {{#view App.NavView}}
      {{#linkTo "contacts"}}Contacts{{/linkTo}}
    {{/view}}
    </ul>
  </script>
</body>
</html>
 
li a {
  color: #ccf; 
}
li a.active {
  color: #009;
}
 
App = Ember.Application.create();
App.Router.map(function() {
  this.route('about');
  this.route('contacts');
});
App.NavView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],
  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
wycatspro
0viewers