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}}>×</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"> </div>
<div class="modal fade">{{yield}}<div>
</script>
<script type="text/x-handlebars" data-template-name="nothing"></script>
Any help is appreciated.