StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20378445
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-12-04T14:50:44.473
FavoriteCount
0
LastActivityDate
2013-12-04T14:50:44.473
LastEditDate
LastEditorUserId
0
OwnerUserId
3021878
ParentId
20377043
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p>I did the same a few days ago and I got Bootstrap Modals working by doing the following. I don't know if it is a good way, but it does the job for me. I am pretty new to ember as well, so feel free to corret me.</p> <p>Since you didn't provided more code, change the following so it fits your needs.</p> <p>In your router, catch the <code>edit</code> action and render your Modal-Template into the template you want. This might look something like this. </p> <pre><code>App.UserRoute = Ember.Route.extend({ actions: { edit: function() { return this.render('editmodal', { into: 'user', outlet: 'md' }); }, close: function() { return this.render('nothing', { into: 'user', outlet: 'md' }); } } }); </code></pre> <p>On click on close, it renders <code>nothing</code> into the template (since you want to close it)</p> <p>Put the form data in your editmodal. Make it a Bootstrap Modal. I just crap-copied it in my draft, I think you got to fix it to make it work.</p> <pre><code><script type = "text/x-handlebars" id = "editmodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="input-group"> <div class="user-edit"> <h4>New Agent</h5> <h5>Agent Avatar</h5> {{input value=avatarUrl}} <h5>User name</h5> {{input value=name}} <h5>User email</h5> {{input value=email}} <h5>User short bio</h5> {{textarea value=bio}} </div> <button {{action "save"}}> Save </button> </div> </div> </div> </div> </script> </code></pre> <p>And you will also need a view, which might look something like this:</p> <pre><code>App.EditmodalView = Ember.View.extend({ didInsertElement: function() { var view; this.$('.modal').modal('show'); view = this; return this.$('.modal').on("hidden.bs.modal", function(ev) { view.controller.send('close'); }); }, layoutName: 'modal_layout', actions: { close: function() { this.$('.modal').modal('hide'); } } }); </code></pre> <p>As you can see, we are refering to a layoutName in here. By doing this, you can reuse a layout. You can also let it be and put everything in one template, but I like it reusable. Your layout might look like this:</p> <pre><code><script type = "text/x-handlebars" id = "modal_layout"> <div class="modal fade" role="dialog">{{yield}}</div> </script> </code></pre> <p>In the same attempt, think about the <code>nothing</code> template, which gets rendered in the template as soon as you close your modal</p> <pre><code><script type = "text/x-handlebars" id = "nothing"> </script> </code></pre> <p>In your <code>User</code> template I just added a name to your outlet.</p> <pre><code><script type = "text/x-handlebars" id = "user"> <div class="user-profile"> {{#if deleteMode}} <div class="confirm-box"> <h5>Really?</h5> <button {{action "confirmDelete"}}> yes </button> <button {{action "cancelDelete"}}> no </button> </div> {{/if}} <button {{action "edit"}}>Edit</button> <button {{action "delete"}}>Delete</button> <img {{bind-attr src="avatarUrl"}} alt="User's avatar" /> <h2>{{name}}</h2> <span>{{email}}</span> <p>{{bio}}</p> <span>Created {{creationDate}}</span> </div> {{outlet md}} </script> </code></pre> <p>What i didn't wrote here is to handle your save events in your Modal.</p> <p>I hope this helps you going. As a beginner myself I know how Ember can really be a hard task. BTW: I think i saw a nice thread about the same issue, when i find it i will post it here</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POMaking a pop up template in Ember.js
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USbaerli
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POMaking a pop up template in Ember.js
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTAcceptedByOriginator
CommentsPostId
1. COThanks so much, Ill give that a go. Where does the view go?
  singulars
  PostPostId
  PO
  UserUserId
  USbookthief
2. COYour view goes in your Javascript whereever you want. But I would recommend you to split your file tree with each template, e.g. Template User has a UserController.js, UserView.js and UserModel.js. If your app grows, using grunt with handlebars plugin which automaticly compiles your templates makes life easier.
  singulars
  PostPostId
  PO
  UserUserId
  USbaerli

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.