StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POtext field filtering a list using ember + ember data
primarykey
Id
13404451
data
AcceptedAnswerId
13405788
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-11-15T19:10:36.490
FavoriteCount
4
LastActivityDate
2012-11-15T20:37:39.540
LastEditDate
LastEditorUserId
0
OwnerUserId
621809
ParentId
0
PostTypeId
1
Score
0
ViewCount
2783
LastEditorDisplayName
text
Body
I'm new at using ember, but already familiar with it, basically following some tutorials here and there and reading the api docs. But tutorials don't go too deep into more complex topics. These are the details: I already implemented a web page that shows a list of items. The following are the relevant code excerpts from different parts of the app. <pre><code>// the data model, the view and the controller App.Item = DS.Model.extend({ name: DS.attr('string') }); App.ItemsController = Ember.ArrayController.extend(); App.ItemsView = Ember.View.extend({ templateName: 'items' }) // in the router's corresponding route connectOutlets: function(router) { router.get('applicationController').connectOutlet('items', App.Item.find()) } // in the handlebars template <ul class="items"> {{#each content}} <li>{{name}}</li> {{/each}} </ul> </code></pre> The data for this list is loaded remotely via ember-data (notice the <code>App.Item.find()</code> call in the route's <code>connectOutlet</code> method above) and a handlebar template displays it, and dynamically updates the list as the data changes. Up to here this is basic ember. Now I want to have a text field at the top of the list, and when the user types in this text field, the list should be updated, by filtering and showing only the items with a name that matches what the user is typing. The actual definition of what a matching name is, is irrelevant to this question. It could be those names that contain the typed string, or that start with it. I know my next step is to include a textfield view on top of the list in the handlebars template: <pre><code><div class="search-bar"> {{view Ember.TextField}} </div> <ul class="items"> {{#each content}} <li>{{name}}</li> {{/each}} </ul> </code></pre> So my questions at this point are the following: <ul> <li>How do I refer to this text field in javascript code so I can attach a listener to it to detect when it changes?</li> <li>And more importantly, what do I need to do inside this event listener so the list gets filtered?</li> <li>I would like to know how to achieve it filtering data loaded locally, but also how to do it by loading the filtering data remotely everytime the user types.</li> </ul> I actually need to implement something slightly more complex than this, but knowing how to do this will help.
Tags
<ember.js><filtering><ember-data>
Title
text field filtering a list using ember + ember data
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USErnesto
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
CommentsPostId
1. This table or related slice is empty.

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.