Is it possible to create a subview with a different controller than its parent?
Specifically, my app has groups and users. Viewing an individual group is handled by App.GroupView, which is connected to App.GroupController, which is a subclass of Ember.ObjectController (since a group is an object).
Within the group view, I want to have another view that shows a list of the users within the group. So my group.handlebars template looks something like this:
<header>
<h1>{{name}}</h1>
<p>{{description}}</p>
</header>
{{view App.GroupUsersView}}
What I'd like to do is to connect App.GroupUsersView to its own controller, which would be a subclass of App.ArrayController, since it represents a list of users. And its content would be set to the users attribute of the group.
How could I accomplish this?
You can use {{render}} helper for that like this:
{{render 'group/users' users}}
Reference: http://emberjs.com/blog/2013/03/30/ember-1-0-rc2.html
Related
Summary
I want to continue to use nested routes but without displaying top level content when the nested route is accessed. I'm not sure this is possible ?
Detail
Initially my requirement was to to display a list of, eg, foods and offer the user the option to add a food item foods/add . Using the outlet tag at the top of the list template allowed a form to add a food item to become visible at the top of the list, transitioning back to food after the add resulted in the list being displayed without the form.
New Requirement
The requirement has now changed and it's necessary to show the form without the the contents of the list and after a succesful add show the list without any form.
Question
I know I could abandon the sub-routes approach and create a route such as food-add but is there any other way of preserving the sub-route (and the corresponding file structure, which I like) but allow the the template for foods/add to be rendered without the list content ?
Each route has an index template which is only visible when a child route is not present.
You could do something like this:
index.hbs
{{#each foods as |food|}}
{{food}}
{{/each}}
<LinkTo #route="food.add">Add</LinkTo>
food/add.hbs
<form>
...
</form>
{{!-- submitting this form would add the new food to the list of foods
and then also transition back to `food` --}}
Here is some more info on how the index route works
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes
There are two hbs files, one is under another layer, for example:
testA.hbs contains,
<div>
{{/testB.hbs}}
</div>
<div id="area">
Hello, world
</div>
At testB.js, I want to call the id area which is presented at testA.hbs. How can I achieve this?
Based on my understanding on what you need, you want to pass the property id from one template test-a to another template test-b.
So in order to make a property id available to your template test-b, you must pass it in like this {{test-b id="area"}}
Now you can access the property id in your
test-b.hbs as {{id}}
test-b.js as this.get('id')
Have a look at my ember-twiddle for a working example. Replicated the same scenario with two components.
is it possible to specify a custom element tag for the .dragList ? In my scenario right now I need it to be a <ul> as I'm rendering my items wrapped inside of <li> - trying to avoid having to create a fork.
something like this...
= drag-sort-list [
tagName="ul"
childTagName="li"
class="someClass"
]
and instead of default rendering a for the list we could render the tagName passed in - would also be nice to be able to pass down a custom class for the parent list as well
You can configure tag names of both drag-sort-list and drag-sort-item components:
{{#drag-sort-list
tagName = "article"
childTagName = "section"
}}
tagName is built into every Ember component.
childTagName is described in the addon's readme.
I got a page that includes 15 pictures and I must redirect user to the details page if one of them is clicked. so, I have 15 different routes like 1,2,3,...15. But as I know, I cant give dynamic variable to #link-to helper. So how am I gonna make every picture go to its own route? this is how my index page .hbs looks like :
{{#each model as |rentalUnit|}}
{{rental-listing rental=rentalUnit}}
{{/each}}
{{outlet}}
This is how I print every picture. And this is how am I trying to go to routes :
{{#link-to "???"}}<img src={{rental.image}} width="200">{{/link-to}}
so, there is ??? because I dont know what to do. Thanks!
Well, first why not use a dynamic segment in your route? Like this:
this.route('image', {path: '/images/:id'});
But what you want can be done by just passing a variable, not a string to the link to helper as first argument:
{{#link-to target}}
Where {{target}} would print your route name. So target is a variable here, not a string.
Checkout this twiddle.
I am creating an Ember.Component which displays a CRUD table. As the component shall be reusable it needs a lot configuration, such as columns to display, pagination options, etc. ...
At the moment I am inserting the component using handlebars:
<div class="some-div">
{{power-table items=this.model columns='...'}}
</div>
I wouldn't want to use this nice way of inserting a component. However, it is pot really possible to extensively configure a component here, is it? I found out it's not even possible to pass an object as parameter, e.g. the following it not possible:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
How and where should I configure the component?
What you can do is that instead of setting columns=[id,name,foo,bar] in the handlebar like this:
<div class="some-div">
{{power-table items=this.model columns=[id, name, foo, bar] }}
</div>
You can set the columns property in the controller for the handlebar template and use the name of the property in the handlebar file. So all the logic would come from the controller and the handlebar would just tell which property is accessible in the component and by what name. So the controller for the enclosing template would be the best place to heavily configure the component. Have a look at the following page for more info:
http://emberjs.com/guides/components/passing-properties-to-a-component/
I am not sure if I understood your problem correctly.