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.
Related
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.
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.
Is it possible to pass multiple list of items in template using {{each}}
Can someone guide me on what I am doing,
in my sales-orders.hbs below is my currenet code.
{{#each model as |detail|}}
<li>{{sales-orders-grid detail=detail}}</li>
{{else}}
Blank
{{/each}}
</ul>
Then calling the sales-orders-grid component
Shipping Method
<div class="col-xs-12 col-md-12 col-sm-12 products-item-products border-left padding10">
<ul>
{{#each shippingMethod as |sm|}}
{{sales-orders-grid-shipping-method sm=sm}}
{{/each}}
</ul>
</div>
In my sales-orders-grid-shipping-method component calling is this:
sm.shippingMethodName
What I'm trying to achieve here is to pass list of items in {{each}} in my main template. Is it possible?
To change scope you can use the "with" helper.
http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_with
{{#with user.posts as |blogPosts|}}
<div class="notice">
There are {{blogPosts.length}} blog posts written by {{user.name}}.
</div>
{{#each blogPosts as |post|}}
<li>{{post.title}}</li>
{{/each}}
{{/with}}
I think you can nest multiple "with" helper.
I think the way to go is to restructure your data as:model.list1,model.list2,etc.
Then pass the model and use as necessary.And use nested each to acheive the grid.
Iam only posting this as an answer because I can't comment yet.
So, do get back to me for Clarifications.
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'm triyng to use the view helper inside my {{#each}} template blocks without using global paths (my controllers create and destroy their own views).
Examples. Given a view with a myList array property, and an itemButton child view:
This will work
<script type="text/x-handlebars" name="my-list-view">
{{#each myList}} <!-- App.myListView.myList -->
{{view App.myListView.itemButton}} {{title}}
{{/each}}
</script>
This will not:
<script type="text/x-handlebars" name="my-list-view">
{{itemButton}} <!-- works fine outside the each -->
{{#each myList}}
{{view itemButton}} {{title}} <!-- itemButton view not found -->
{{/each}}
</script>
I do not appear to be able to access the parent view from the each view helper (or in fact access anything other than the properties of the objects being iterated).
The hacky workarounds I've come up with are:
Add the view I want to use to the items I'm iterating over.
or
Creating a collectionView in App.myListView
Create an itemViewClass view in that collection view class
Move the itemButton view inside the itemViewClass
Replace {{#each}} with {{#collection}}
or
Create a custom handlebars helper for iteration.
Both of these options seem horrible.
Surely there's a better alternative than creating 2 new classes (and nesting 4 views deep) just to iterate over a list, though. Is there a replacement handlebars helper I can use instead?
Workaround implementations
Option #1 : Modifing the content array
http://jsfiddle.net/FQEZq/3/
Disadvantages: Having to add the view to each model instance just for iteration.
Option #2 : Custom collection view
http://jsfiddle.net/ST24Y/1/
Disadvantages: Now you have two additional views that you do not need / want, and less control of markup. References from the child view to the parent instance now requires parentView.parentView.parentView.
#each is too limited for your requirements. You can make it work if you're willing to use a global path to the view you want to nest within the #each. Otherwise, your collection view approach is best. Adding the view to the model instance is likely to muddy your app design something fierce, so I would avoid that.
One idea to keep your templates clean is to take advantage of Ember.View properties like:
collectionView - Return the nearest ancestor that is an Ember.CollectionView
itemView - Return the nearest ancestor that is a direct child of an Ember.CollectionView
contentView - Return the nearest ancestor that has the property content.
The big thing here - options.
Hooks for how you wish to use a template are available. These are:
<-- render templates/name.js -->
{{partial 'name'}}
<-- render views/name.js -->
{{view 'name'}}
<-- render views/name1.js with controllers/name2.js -->
{{render 'name1' 'name2'}}
<!-- see also: -->
{{output}}
{{output 'named'}}
{{yield}}
An example variant of your initial template showing 4 different options:
<script type='text/x-handlebars' data-template-name='my-list-view'>
<h2>Option 1</h2>
{{#each myList}}
{{! the 2nd parameter will look for itemButtonController }}
{{render 'itembutton' itemButton}}
{{/each}}
<h2>Option 2</h2>
{{#each myList}}
{{! using an Ember Component }}
{{#item-button }}
some static text OR {{dynamic}}
{{/item-button}}
<!-- in component/item-button.hbs add {{yield}} for where you want the static content to output -->
{{/each}}
<h2>Option 3</h2>
{{#each myList}}
{{! if the button is to be a link }}
{{#link-to 'route' parameter tagName='button' classNames='btn'}}
{{title}}
{{/link-to}}
{{/each}}
<h2>Option 4</h2>
<p>Ludicrous example showing almost every reference option!</p>
{{! focus the context on subview data }}
{{#with someArrayOrCollectionOfView}}
{{! prepend type to add context - here returning back up to this view's properties }}
{{#each view.myList}}
{{! this is equivalent to someArrayOrCollectionOfView[x].name }}
{{name}}
{{! a button that hooks in route, model, and 2 controllers, and applies a target for the output when clicked }}
{{#link-to 'page' controllers.page.nextPage target='outlet' tagName='button' disabledWhen=controller.disableNext }}
{{model.buttonName}}
{{/link-to}}
{{/each}}
{{/with}}
{{! generic default target (automatic) }}
{{outlet}}
{{! example of a named target }}
{{outlet 'footerlinks'}}
</script>
Mmmm... reference for further reading:
Ember.Handlebars.helpers