I have an array of strings passed as an argument to a component, inside the component I am using "each" helper to render each string in a text input. I tried the following approach.
I have a model passed as an argument to a component. I'm using #each helper to iterate through that model and this does not work.
Example:
Template
<div>
<Location::LocationList #model="{{#model}}"/>
</div>
LocationList component:
<ul class="location-list">
{{#each this.args.model as |location|}}
<li>
{{#location.title}}
</li>
{{/each}}
</ul>
And if I just do it in this way:
<ul class="location-list">
{{#each #model as |location|}}
<li>
<Location::LocationItem #location={{location}}/>
</li>
{{/each}}
</ul>
It works as needed.
Any suggestions?
According to the docs on Component Arguments, using the #model as you have in your last snippet,
<ul class="location-list">
{{#each #model as |location|}}
<li>
<Location::LocationItem #location={{location}}/>
</li>
{{/each}}
</ul>
is the correct way to reference arguments.
Referencing args via this.args is reserved for usage in the class body of a component.
the #namedArgs syntax is consistent across class-based components and template-only components as template-only components do not have a this.
Related
Here is my model, how can i sort it before I send to template?
route.js
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return {
"fruits":[
{fruit:"mango",color:"yello"},
{fruit:"banana",color:"muddy yellow"},
{fruit:"apple",color:"red"}],
"prices":[9, 10,5 ]
}
}
});
Twiddle Demo
Any one please update my twiddle? looking for ember approch.
here is my hbs:
<h1>Fruit Prices Sorted here</h1>
<ul>
{{#each sortedSongs as |price|}}
<li> {{price.fruit}}</li>
{{/each}}
</ul>
<h1>Fruit Prices Sorted here</h1>
<ul>
{{#each sortedPrice as |price|}}
<li> {{price.price}}</li>
{{/each}}
</ul>
<h1>Fruit Details Sorted by Alphabetically </h1>
<ul>
{{#each model.fruits as |fruitObject|}}
<li> {{fruitObject.fruit}}</li>
{{/each}}
</ul>
<br>
<h1>Fruit Color Sorted by Alphabetically </h1>
<ul>
{{#each model.fruits as |fruitObject|}}
<li> {{fruitObject.color}}</li>
{{/each}}
</ul>
Take a look into Ember.computed.sort or
In your twiddle you should create a computed property in the controller, which would sort model.fruits and return the result, e.g.:
nameSort: ['name'],
sortedByName: Ember.computed.sort('model.fruits', 'nameSort')
The second argument has to be a name of a property which holds an array of properties you want to sort by. Or you can provide a function if you need some custom sorting logic.
I've edited your twiddle. Also I think the price attribute was supposed to go inside each fruit object, not in a separate list, so I moved it.
https://ember-twiddle.com/78e0b3e9ff873a8909221efc87e3ef43
Next time do some research though, Ember.computed.sort documentation isn't hard to find.
If I declare a component like this:
<p>
{{#x-autosuggest source=model destination=tags minChars=0}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>
I want the name that field to come from a context I pass using the new block params syntax. I've tried the code sample below but the context is still the context of the controller and not the argument I pass using yield in the component's hbs file.
<ul class='selections'>
{{#each destination as |selection|}}
<li class="selection">
<a class="as-close" {{action "removeSelection" selection}}>x</a>
{{yield selection}}
{{displayHelper selection searchPath}}
</li>
{{/each}}
</ul>
How can pass the selection argument so I can set the name attribute in the original code snippet?
I've recreated a basic example with this jsbin
You need to add as |name| where you're using your component to get the yielded value.
<p>
{{#x-autosuggest source=model destination=tags minChars=0 as |name|}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>
I've a template whose model contains two different sets of array elements. I've to list them with a check box, so that user can select multiple items from both the lists. I've to collect all the items.
I started as follows
<script type="text/x-handlebars" data-template-name="temp">
<p>List 1</p>
<ul>
{{#each list1}}
<li>
{{input type="checkbox"}}
{{name}}
</li>
{{/each}}
</ul>
<p>List 2</p>
<ul>
{{#each list2}}
<li>
{{input type="checkbox"}}
{{name}}
</li>
{{/each}}
</ul>
</script>
I thought to have controllers for the two lists separately. But not sure how to get the list together. The place where I've the total control could be "TempController", but not sure how to get the checked property of each item in the two different lists.
I hope I've explained my functionality. Hope there is a solution or work around for this.
Thanks.
I have a component that lists countries. It is used in several places, the only difference being the place where the link-to is pointing.
How is this best achieved? Are components the way to go?
{{country-list countries=model route="someroutehere"}}
in the component i have a simple #each
<ul class="nav nav-stacked"
{{#each countries}}
<li class="brd-b-g">{{#link-to routepassedtothecomponent this}}{{name}}{{/link-to}}</li>
{{/each}}
</ul>
You're on the right track. You just need to reference the property that you used to pass the route. Eg:
Template:
{{country-list countries=model myProperty="someroutehere"}}
Component:
<ul class="nav nav-stacked">
{{#each countries}}
<li class="brd-b-g">{{#link-to myProperty this}}{{name}}{{/link-to}}</li>
{{/each}}
</ul>
Working example.
I have a two-level deep data model that I want to display with Ember.js as nested lists. If I do the simple version it performs quite well:
{{#each parent in content}}
<p>Table {{parent.id}}</p>
<ul>
{{#each item in parent.children}}
<ul>
<li>{{item.position}}</li>
<li>{{item.position}}</li>
<li>{{item.position}}</li>
</ul>
{{/each}}
</ul>
{{/each}}
http://jsfiddle.net/krumpi/TdZJG/
However if instead of displaying the model's properties as raw strings I use nested Ember.Select and Ember.TextArea views the performance suffers a lot, it takes quite a bit after the load button is pressed to display the controls in the page:
{{#each parent in content}}
<ul>
{{#each item in parent.children}}
<ul>
<li>pos: {{item.position}}</li>
<li>
{{view Ember.Select
class="input-small"
contentBinding="App.CheckValues"
selectionBinding="item.status"}}
</li>
<li>{{view Ember.TextArea class="textarea-animated" name="description" valueBinding="item.comment"}}</li>
</ul>
{{/each}}
</ul>
{{/each}}
http://jsfiddle.net/krumpi/wtwHN/
Would you have any suggestion on how to improve performance. This is done with ember-1.0.0-pre4
Instead of using Ember select and textarea views use normal html tags for them and bind only the attributes. Those views usually occupy more memory and writing them inside a nested structure will expectedly make your code run slow.