I have a problem with my emberjs view. I cannot access to the model defined in the parent view. I have tested with view.parentView.model and this not working
Here is my code :
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each view.content}}
<h1>{{model.allowed_email_domain}}</h1> <!-- not working -->
{{/each}}
Thank's
Ignoring the fact that you are using the view and probably shouldn't be, it's because you've changed the context inside the each loop.
Depending on the version of handlebars/htmlbars you are using
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each view.content as |item|}}
<h1>{{model.allowed_email_domain}}</h1> <!-- working -->
{{/each}}
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each item in view.content}}
<h1>{{model.allowed_email_domain}}</h1> <!-- working -->
{{/each}}
Related
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 would like to trigger an action on the ArrayController of child elements in the parent view. How would I go about that?
Specifically, I am trying to add a new child element to a hasMany relationship. It works fine using {{action new}} in the view of the child elements, but I am not sure how to do this from the parent view.
<script type="text/x-handlebars" data-template-name="parents">
<b>List</b><br />
{{#each parent in controller}}
{{ parent.name }} <br />
{{ render "kids" parent.children }}
<a href="#" {{ action parent.children.new target="controller" }}>Parent View Make Kid</a<br/>
<br />
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="kids">
{{#each kid in controller}}
> {{ kid.name }} <br />
{{/each}}
<a href="#" {{ action new }}> Kid Controller Make Kid</a><br />
</script>
In the above "Kid Controller Make Kid" works fine, "Parent Controller Make Kid" does not.
Please find a fiddle illustrating the problem here: http://jsfiddle.net/chopper/zHnQC/2/
Thanks!
From the parent's view you can't access directly to the children's controller like that. I think the best option would be to implement a newKid method on ParentsController responsible to create the new record on its model.
I've forked your fiddle and implemented a working example: http://jsfiddle.net/pxkys/1/
Hope this helps!
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.
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
How to append a dynamic class to a view that already has a static class?
http://jsfiddle.net/MBmUs/4/
We've recently added this functionality to Ember. With a build off master, or after 0.9.6 is released, you can do:
<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>
With Ember-CLI, you can just render it directly within the class:
{{#each items as |item|}}
<div class="static-class {{item.class}}">
<!-- content -->
</div>
{{/each}}
With HTMLBars this is what works for me:
<div class="{{dynamicAttr}} staticAttr">
<!-- content -->
</div>