Passing data into a view to display in a modal box


#1

Hi guys,

This is my first post here, so please bear with me. I’m currently working on a project with Ember + Ember-Data and I plan to display the posts in a modal view, kinda like what USAToday.com does. I’ve been following this tutorial http://hawkins.io/2013/06/ember-and-bootstrap-modals/ but I’m kinda stuck. The modal window is fired up when I click on an article, but I can’t seem to have access to the data within the model. Here’s a snippet of code:

Cjbs.ModalView = Ember.View.extend
  controller: Cjbs.PostController.create()
  didInsertElement: -> @$('.modal, .modal-backdrop').addClass('in')
  layoutName: 'modal_layout'
  close: ->
    @$('.modal').one 'transitionend', (ev) => @controller.send 'close'
    @$('.modal, .modal-backdrop').removeClass 'in'
Cjbs.ApplicationRoute = Ember.Route.extend(events:
open: (model) -> 
  @render 'modal', {into: 'posts', outlet: 'modal'}
  @transitionTo 'post', model
close: -> 
  @render 'nothing', {into: 'posts', outlet: 'modal'}
  @transitionTo 'posts'
) 

===

<script type="text/x-handlebars" data-template-name="posts">
    <div class="left">
      {{#each}}
            <img {{bindAttr src=image_thumbnail}} />
            <h3><a href=# {{action open this}}>{{title}}</a></h3>
      {{/each}}

      {{outlet modal}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="post">
    <h2>{{title}}</h2>
    <div class="content">
      <img {{bindAttr src=image_large}} />
      {{{body}}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="modal">
  <div class="modal-header">
    <button type="button" class="close" {{action close}}>&times;</button>
    <h3>Title Goes Here</h3>
  </div>
  <div class="modal-body">
    <p>Lorem Ipsum Dolor Amet Sit</p>
</div>
    {{controller}}
    <div>{{content.title}}</div>
</script>

<script type="text/x-handlebars" data-template-name="modal_layout">
  <div class="modal-backdrop fade">&nbsp;</div>
  <div class="modal fade">{{yield}}<div>
</script>

<script type="text/x-handlebars" data-template-name="nothing"></script>

Any help is appreciated.