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.
Related
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.
I was reading up on template development in Drupal. ( https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates )
Drupal recommends creating an attributes object with create_attribute() and use the object that it creates to declare attributes to a html element. E.g.:
<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
{{ content }}
</div>
Where I would usually just use:
<div class='region region--header'>
{{ content }}
</div>
I can imagine that this could be useful if you need to add attributes using some conditional logic. But I wouldn't want too much logic in a template.
I probably missed something essential here. Can someone clarify what the advantages of using create_attribute() are over hardcoding classes? When should I use the create_atribute() approach? What is a common scenario where the create_attribute() comes in handy?
IMHO there is no benefit of create_attribute() in your example, because attributes values are still hardcoded within create_attribute() function.
It is way more useful if attributes are hold in a variable that can be manipulated in (extended) templates with functions like addClass, removeClass, setAttribute,... For example we define attributes array (in twig or in processors) for given html element and you would simply render attributes with <div {{ create_attribute(attributes_for_this_div) }}></div>.
In Drupal core or in commonly used modules, I did not find single example of create_attribute() with hardcorded attributes.
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}}.
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"
Being a frontend dev familiar with Ruby, i'm trying to learn Django templating system.
It appears to be an inside-out version of what i'm used to. I struggle to comprehend its reverse ideology: instead of declaring reusable blocks and including them where necessary, in Django you mark some parts of your template as overridable.
Here are two things that i don't understand about this.
With Ruby's Padrino, i would declare a partial (a reusable snippet of templated HTML) and then include it in multiple places. Wherever i call it, it would output its HTML.
According to Django's templating documentation, each block can be used on a page only once: Finally, note that you can’t define multiple block tags with the same name in the same template.
Another feature of Padrino that i find extermely useful is that partials can accept HTML and output (yield) it in a certain place inside them. Below are a couple examples, one for Padrino and one for Jade.
Please note that partails HTML not as a string (awkwardly passed via an argument) but in a template language via nesting.
Padrino (Ruby) example
With Padrino i can pass HTML template code into partials:
_container.erb
<div class="container <%= myclass %>">
<div class="container-inner">
<%= yield %>
</div>
</div>
layout.erb
<%= partial 'container', locals: { myclass: 'container--header' } do %>
<h1><%= Sitename %></h1>
<p>Welcome to my humble place</p>
<% end %>
Resulting HTML
<div class="container container--header">
<div class="container-inner">
<h1>Sitename</h1>
<p>Welcome to my humble place</p>
</div>
</div>
Jade example
In Jade, partials are called mixins and are processed directly by the template engine rather than the backend framework:
Jade source
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided
+article('Hello world')
p This is my
p Amazing article
Resulting HTML
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>
Is it possible with Django?
Questions:
How do i reuse a block multiple times in Django? I would like to declare a snippet of template code and include it in multiple places on the page.
How do i pass HTML (template code) into a block? I would like to reuse it with different content.
The use case that i'm trying to cover is a reusable partial/mixin/block that would serve as a container wrapper for each section of the site.
Note that with Padrino, i can even make the partial in such a way that it will let me choose which wrapper tag (div, nav, header...) should be used for each instance of the partial, by passing an argument when including the partial:
<% partial 'container', myclass: 'container--header', tag: 'nav' %>
I wonder how to do that with Django.
In your answer, please comment on whether it is possible with both a) basic Django functionality; b) some Django extensions.
Thank you.
I’m not familiar with Padrino, so I’m not 100% sure I understand what you’re looking for.
However, Django template blocks definitely aren’t the equivalent of Padrino’s partials. From your description, I think the equivalent would be custom template tags.
In outline, to create a custom template tag, you:
Create a templatetags module within your Django app, with a file in it to contain the Python code for the tags e.g.
yourapp/
models.py
templatetags/
__init__.py
mytemplatetags.py
Within that file, create a variable called register that’s an instance of django.template.Library:
# mytemplatetags.py
from django import template
register = template.Library()
Within that file, write a function for each custom tag that you want.
For a tag that includes a template snippet, you’d want to write an inclusion tag.
Inclusion tags can take arguments, which could include HTML (but only as a string).