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.
Related
I have the following code:
{{#tabs-controls initial='content' modal="true" title="Hotspots" tabs=tabs style="on-ground" as |uniqueTarget currentTab|}}
<div class="tab-pane active" id="content-{{uniqueTarget}}" role="tabpanel">
//... Code
</div>
{{/tabs-controls}}
However tabs-controls is a component that lives outside the directory of the component calling it.
-components
-tabs-control
-hotspots
-hotspots-container
-hotspots-content
-template.hbs
I've tried:
{{#../tabs-control}}
{{#../..tabs-control}}
Both again without the pound sign...All I get are compiler errors.
What is the right way to achieve this?
This sort of relative path in Handlebars is more about navigating the rendering contexts than about file layout. Using the example from the Handlebars documentation, if you were using the context-switching version of each you could do:
{{permalink}}
{{#each arrayOfObjects}}
{{..permalink}} <!-- you are accessing the permalink property above -->
{{permalink}} <!-- you are accessing the permalink property of the of the object being "eached" -->
{{/each}}
However, this doesn't apply to Ember since the context-switching forms of helpers were removed.
The way to think about the path to components is that /components is the root, so if you have /components/tabs-control, the way you call it is {{tabs-control}}. If you want to render /components/hotspots/hotspots-container, the way to do it is {{hotspots/hotspots-container}}.
In a page, I have a rendering with a placeholder, Offcanvas.cshtml
<div data-ads-offcanvas-id="#Model.Id" class="ads-offcanvas #Html.GetCssStyles()">
#{
<a data-ads-offcanvas-trigger-id="#Model.Id" class="ads-close-button" href="#0">X</a>
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
}
and inside that rendering, I plan to put another rendering with a placeholder named Modal.cshtml
<div data-ads-modal-container="#Model.Id" class="ads-modal-container">
<div class="ads-modal-dialog">
<div class="ads-close-box">
<a data-ads-modal-id="#Model.Id" href="#0">X</a>
</div>
<div class="ads-modal-content">
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
</div>
</div>
So it looks like:
-Offcanvas
+-Modal
++-Text content
When I put text content inside the Modal rendering, the content is not rendered. I'm guessing that it only renders that first few renderings and fail to do so when the renderings became highly nested.
Is there a solution to render components to the very-most child?
Thanks guys!
EDIT:
Here's the code for GetPlaceholder:
public static string GetPlaceholder(string name, Guid id)
{
return $"{name}_{id}";
}
Dynamic placeholders are a bit more complicated than generating a unique placeholder key. The generated key still needs to resolve back to a real placeholder that is defined in Sitecore.
Check out the Integrated Dynamic Placeholder module.
This will provide an Html helper similar to your current implementation:
#Html.Sitecore().DynamicPlaceholder("[Placeholder Name]")
I have the following code in an Emblem.js template:
each segment in controller
.panel.panel-default
.panel-heading
h4.panel-title
a data-parent="#accordion" data-toggle="collapse" href="#collapse{{segment.id}}"
span {{segment.title}}
div id="collapse{{segment.id}}" class="panel-collapse collapse in"
What I'm actually trying to achieve is to interpolate object data into the HTML attributes. I been trying to {{segment.id}} but that render some script tags along with the value which is not what I'm looking for. Is there another way to do this?.
Until HTMLBars comes out, Ember.js is going to need to insert placeholder tags to manipulate the DOM. You have two options:
Create a computed property that will join the strings for you, then use bind-attr to apply the property to the ID or class.
Use the unbound helper. This will do what you want, but it won't update the property if it changes.
I suggest doing the first if you can.
if the data isn't going to change, you can use unbound and it'll just jam it in there without script tags.
each segment in controller
.panel.panel-default
.panel-heading
h4.panel-title
a data-parent="#accordion" data-toggle="collapse" href="#collapse{{unbound segment.id}}"
span {{segment.title}}
div id="collapse{{segment.id}}" class="panel-collapse collapse in"
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.
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