I need to display several Ember.Select widgets in a loop:
{{#each foo}}
{{view Ember.Select
selectionBinding="App.s1.selected"
contentBinding="App.s1.content"
}}
}}
The problem is that this will tie all these selects to the same model ("App.s1"). How can I tie each Ember.Select to a different model?
Ideally, I'd like to define an array of my models and in the loop, tell Ember to use the index "i" of that array, where "i" is the index of the current iteration. Is this possible at all?
You would want to store all of your sN's (s1, s2, s3, etc) in an array, say App.contentArray, and then in your template do
{{#each item in App.contentArray}}
{{view Ember.Select selectionBinding="item.selected" contentBinding="item.content"}}
{{/each}}
No need for an i index or explicit for loops.
Related
I have a source code(discourse) than I need to work with with ember.js. I am trying handle only one "post" (the first) in a list using cloaked-collection.
//topics.hbs
{{#unless model.postStream.loadingFilter}}
{{cloaked-collection itemViewClass="post"
defaultHeight="200"
content=postsToRender
slackRatio="15"
loadingHTML=""
preservesContext="true"
uncloakDefault="true"
offsetFixedTop="header"
offsetFixedBottom="#reply-control"}}
{{/unless}}
//post.hbs
//some code here.
//Then I want to insert <div class="uniw"></div> only on the first post
The question is: for the list of itemViewClass="post", how can I check if I am in the first "post"? so that i can insert a piece if code.
You should be able to use firstObject to get first object of a collection. Something like this:
{{items.firstObject}}
Inside each block you can check index:
{{#each people as |person index|}}
{{#if (is-equal index 0)}}
{{person}}
{{/if}}
{{/each}}
Note that is-equal is non-standard helper. You can get it from ember-truth-helpers addon or write it yourself
I got a deprecation warning on {{#each}} saying I should switch to {{#each items in items}} but I can't make it work.
http://jsbin.com/qeqeyazoci/2/edit?html,js,output
http://guides.emberjs.com/v1.10.0/templates/displaying-a-list-of-items/
You need to look iterate through content instead of items
{{#each item in content}}
I have an array of items and I want to have a select view for each of the item in the array. I am able to populate the dropdown list, but i am unable to set the default select value for each of the item.
{{#each item in items}}
{{item.item_name}}{{item.user_id}}
{{view Ember.Select
content=controller.users
optionValuePath="content.user_id"
optionLabelpath="content.user_name"
value="item.user_id"}}
{{/each}}
Each item object contains a user_id. I want the select view for each item to be set in accordance to the user_id from each item.
Thanks!
I guess, optionLabelPath was not correct and optionValuePath="content.user_id" should have been optionValuePath="content.id" also the value should be valueBinding.
Something like this:
{{view Ember.Select
contentBinding=controller.users
optionValuePath="content.id"
optionLabelPath="content.user_name"
valueBinding="item.user_id"}}
Ok so I have a pretty simple array of objects that I retrieved with emberjs, now all I need it to do is have something along the lines of
{{#each array}}
{{value}}
{{/each}}
and have it so that the array is looped by each item, and each item then is looped by each value and I display all the values of that object, I am not sure how to get it to work.
I have used this helper here https://gist.github.com/strathmeyer/1371586 but it's no use, I have no idea where to start, it just seems like such a simple thing I don't understand why handlebars/ember doesn't support it, also does #key work at all with ember?
Thanks
Ember Handlebars doesn't support looping over objects.
To loop in an array you simply use
{{#each item in collection}}
{{item}}
{{/each}}
or
{{#each collection}}
{{this}}
{{/each}}
I'm trying to link a label to an input field using the {{bindAttr}} and the input field's [viewName].elementId. It works on a single entry view, but not when there are several records being displayed: it just links the label to the last input field in the collection. (This used to work in a previous iteration using an older ember library but now it doesnt.) I've created a fiddle but the gist of it is:
{{#each controller}}
<fieldset>
<label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
{{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}
</fieldset>
{{/each}}
I thought maybe I could create a collectionView and create a calculated property for viewName which would generate a unique ID for each item in the collection, sort of mentioned in answer to another problem here. But that is getting WAY too complicated - just so that I can have the input field highlight itself if the user clicks on the corresponding label.
Any help appreciated.
Create a wrapper Ember.View around the label and input field. Let's call it App.FieldView:
App.FieldView = Ember.View.extend({
tagName: 'fieldset'
});
Then in your template:
{{#each controller}}
{{#view App.FieldView}}
<label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
{{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}
{{/view}}
{{/each}}
Fiddle: http://jsfiddle.net/NQKvy/26/
Panagiotis Panagi, has answered the question correctly. I'll just add why this is happening, ie:- linking to the incorrect view.
The view property inside a template refers to the Ember View wrapping the html markup. This property however has different value depending on the context it is in.
This value is dependent on the view block it placed in. By default the template itself corresponds to a view in this case, ListOfPeopleTemplateView.
So when you are binding to view.tbFullName.elementId, you are actually binding to an {instance of ListOfPeopleTemplateView}.tbFullName.elementId. And when the loop finishes the only tbFullName visible is the last one.
Panagiotis Panagi's solution is to wrap the label inside another view, so the value of view changes to within that block, and hence points to the correct tbFullName
Finally an even easier way to achieve the same result is to wrap the textfield inside the label. Then you do not need the label for binding at all.
<label>Full Name
{{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}
</label>
See this jsfiddle
Forms are somewhat tricky I must admit if you want to do things right. But there are is an ember add-on that comes to the rescue, for example easyForm.
Have a look it might helps you solving exact the problems you are facing, like the ones on having unique labels for your form fields etc.
Hope it helps.