StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIs this the correct way for using Reveal with Ember.js?
text
Body
copied!<p>I tried to implement <a href="http://foundation.zurb.com/docs/reveal.php" rel="nofollow">Foundation Zurb's Reveal</a> nicely in an Ember app, but I didn't succeed. Now with the pre.4 release I tried again and it turns out to be really easy, but I'm still wondering if I'm following the right patterns. If so, I hope this example will help you in your project.</p> <p>Using:</p> <ul> <li>ember-1.0.0-pre.4.js</li> </ul> <p>A working example can be found in this <a href="http://jsfiddle.net/bazzel/ypzPx/" rel="nofollow">jsfiddle</a>.</p> <p>I have a list of <strong>Post</strong> objects. Clicking on a list item will open a modal dialog and shows detailed information about the post.</p> <p>To show the list, I create an Ember app and have a resource for my <strong>Post</strong> model:</p> <pre><code>window.App = Em.Application.create(); App.Post = DS.Model.extend({ title: DS.attr('string'), description: DS.attr('string') }); App.Post.FIXTURES = [{ id: 1, title: 'Lorem', description: 'Lorem ipsum dolor sit amet' }, { id: 2, title: 'Ipsum', description: 'Fusce ante nulla' }]; App.Store = DS.Store.extend({ revision: 11, adapter: DS.FixtureAdapter.create() }); App.Router.map(function () { this.resource('posts', { path: '/' }); }); App.PostsRoute = Em.Route.extend({ model: function () { return App.Post.find(); } }); </code></pre> <p>For the modal dialog, I include a <code>render 'reveal'</code> in the <strong>application</strong> template.</p> <pre><code><script type="text/x-handlebars"> {{outlet}} {{render "reveal"}} </script> </code></pre> <p>I override the (by Ember on-the-fly generated) <strong>RevealController</strong>, since I need an <strong>ObjectController</strong> and I create a <strong>reveal</strong> template.</p> <pre><code>App.RevealController = Em.ObjectController.extend(); </code></pre> <p>Since the content of my <strong>RevealController</strong> an instance of the <strong>Post</strong> model, I can put its properties in the template:</p> <pre><code><script type="text/x-handlebars" data-template-name="reveal"> <div id="myModal" class="reveal-modal large"> <h2>{{title}}</h2> <p>{{description}}</p> <a class="close-reveal-modal">&#215;</a> </div> </script> </code></pre> <p>When I click on the title of a Post I want to set the content of the RevealController the instance of the Post. For this, I call the <code>openModal</code> event from the <strong>posts</strong> template and pass the current <strong>Post</strong> as its context:</p> <pre><code><script type="text/x-handlebars" data-template-name="posts"> <ul> {{#each controller}} <li> <a {{action openModal this}} href='#'>{{title}}</a> </li> {{/each}} </ul> {{outlet}} </script> </code></pre> <p>Due to <a href="http://emberjs.com/guides/templates/actions/#toc_target-bubbling" rel="nofollow">target bubbling</a> I can define the <strong>openModal</strong> event in the <strong>ApplicationRoute</strong> and I can set the content of the <strong>RevealController</strong> to the passed <strong>Post</strong> and eventually show the dialog:</p> <pre><code>App.ApplicationRoute = Em.Route.extend({ events: { openModal: function (content) { this.controllerFor('reveal').set('content', content); $('#myModal').reveal(); } } }); </code></pre> <p>With my current knowledge of ember this feels like the right way to do, but I'm excited to hear if there are any improvements.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload