Bootstrap Collapse Example

Minimal RC1

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/x-handlebars">
    <h6>Application view</h6>
    {{outlet}}    
</script>
<script type="text/x-handlebars" data-template-name="index">
    <h6>Index View</h6>
    <div class="accordion" id="accordion2">
      {{#each item in controller}}
        {{view App.AccItemView contextBinding='item'}}
      {{/each}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="acc_item">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse"  {{bindAttr href="item.href" }}>
              {{item.firstName}}
            </a>
          </div>
          <div {{bindAttr id='item.id' }} class="accordion-body collapse in">
            <div class="accordion-inner">
              {{item.fullName}}
            </div>
          </div>
</script>

JavaScript

App = Ember.Application.create
    LOG_TRANSITIONS: true

window.App = App

App.Person = Ember.Object.extend({
    id: null,
    firstName: null,
    lastName: null,
    href: ( ->
           return "#"+this.get('id')
           ).property('id').cacheable()

    fullName: ( ->
        return this.get('firstName') + " " + this.get('lastName');
    ).property('firstName', 'lastName').cacheable()
});

App.IndexController = Em.ArrayController.extend
    title: 'index controller'
    content: []

    
App.IndexRoute = Em.Route.extend
    enter: ->
        console?.log('index route')
    setupController: (controller, model) ->
        ct= [
            App.Person.create({id: 1, firstName: 'Bob', lastName: 'Joan'}),
            App.Person.create({id: 2, firstName: 'Tom', lastName: 'Jim'}),
            App.Person.create({id: 3, firstName: 'Brad', lastName: 'Milas'}),
            App.Person.create({id: 4, firstName: 'Eric', lastName: 'Sembs'})
        ]
        console?.log(controller)
        controller.set('content', ct)

App.IndexView = Em.View.extend
    templateName: 'index'

App.AccItemView = Em.View.extend
    templateName: 'acc_item'
    classNames: ['accordion-group']
    didInsertElement: ->
      Ember.run.next this, ->
        @.$('.collapse').collapse({parent:"#accordion2"})

 
App.Router.map (match) ->
    @route "index"