What do I do when I run across this?
<div className="ui row myClass">
If myClass was the only class I would import the relevant style sheet and do this:
<div className={styles.myClass}>
This syntax does not work (not surprising) and I am not sure what to do:
<div className="ui row" {styles.myClass}>
Should I just boil it down to a class without tag selectors?
I may have misunderstood you, but if I got you right, what I'd do is simply using template literals, like so:
<div className={`ui row ${styles.myClass}`}>
Take into account, in the end, React components are just JS. That's the beauty of them. Just remember: now any JS expression, like props, etc., has to be with $ sign (between ${} instead of just {}).
Related
In a particular new website using Elixir and Phoenix, there is lots of boilerplate in order to make the pages have a consistent style. Hence there is a "layout" template whose inner_content delegation is inside the html <body> tag (and a couple <div>s for styling). However, some parts of the <head> actually do change page-to-page, and these aren't just a few trivial values like the <title/>, there's a bunch of SEO metadata too.
Worse yet, there's probably enough visible boilerplate in each page, that significant nontrivial parts of the <body> probably ought to be factored out of the individual templates and into the layout, yet those parts might also contain title-like values.
How do I specify arbitrary extra content for the <head>, or for other places outside the one place where the vast majority of page-to-page-variable content goes, without getting an unmaintainable anti-DRY mess? (Where I come from, a child template could divide itself up into multiple named blocks that a layout template could substitute by-name at multiple different places within itself.)
I believe the correct thing to do is to use assigns field on the [Plug.Conn][1]
In my Pheonix (v 1.6.10) there's pre-decided page_title assigns, so just do this:
conn
|> assign(:page_title), "My Special title")
and it just works, because my root.html.heex has this:
<%= live_title_tag assigns[:page_title] || "Rumbl", suffix: " · Phoenix Framework" %>
And I suppose this is the right thing to do with any other custom stuff, like SEO medatada:
conn
|> assign(:my_seo_metadata), "Whatever")
and add in your template
<whatever>
<%= assigns[:my_seo_metadata] %>
</whatever>
By default, Limesurvey provides the follow text elements for the surveys - Survey title, Description, Welcome message, End message etc, which I can use in my template with tags like {SURVEYNAME}, {SURVEYDESCRIPTION}, {WELCOME} etc.
Is it possible to add my own custom field, which I can then use in the template? I need to do it this way because I need to have the text translatable, and present on every page.
You can not add a custom replacement with the current version of LimeSurvey. And your LimeSurvey version seems outdated. But LS includes jquery, therefore it's easy to move some element from a place to elsewhere.
Quick example:
<p>Here is your description</p>
<div style='display:none'>
<label for='languagechanger' id='labellang'>Here is the new label for language</label>
</div>
<script>
$(function() {
$("#labellang").insertAfter("#languagechanger")
});
</script>
A PHP solution, hacking LimeSurvey code, should be placed at https://github.com/LimeSurvey/LimeSurvey/blob/master/application/helpers/replacements_helper.php#L814
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.
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).
I'm exploring Django and got this particular problem.
How do I prepend <span class="label">Note:</span> inside {{article.content_html|safe}}?
The content of {{article.content_html|safe}} are paragraph blocks, and I just wanna add <span class="label">Note:</span> in the very first paragraph.
Thanks!
Sounds like you want to write a custom tag that uses BeautifulSoup to parse the HTML and inject the fragment.
There's no easy way. You can easily prepend to all articles.
<span class="label">Note:</span>
{{article.content_html|safe}}
If that doesn't help you consider changing the structure of article.content_html so you can manipulate with blocks from django templates, so it should look something like this
{{article.content_header}}
<span class="label">Note:</span>
{{article.content_html}}
If that solution is not feasible to you and you absolutely need to parse and modify the content of article.content_html, write your own custom filter that does that. You can find documentation about writing custom filters here http://docs.djangoproject.com/en/dev/howto/custom-template-tags/#writing-custom-template-filters.
An alternate approach could be to do this with javascript. In jQuery, it would look something like:
var first_p_text = $("p:first").text()
$("p:first").html("<span class="label">Note:</span>" + first_p_text)
Note though that if there are other elements inside your first p, $("p:first").text() will grab the text from those as well - see http://api.jquery.com/text/
Of course, this relies on decent javascript support in the client.
jQuery is the simplest and easiest to implement. You only need one line with the prepend call (documentation):
$('p:first').prepend('<span class="label">Note:</span>');
Explanation: 'p:first' is a jQuery selector similar to the ':first-child' CSS selector. It will select the first paragraph and the prepend call will then insert the span into that selected paragraph.
Note: If there is a paragraph on the page before your content, you may have to surround it with a div:
<div id='ilovesmybbq'>{{article.content_html|safe}}</div>
Then the jQuery call would be:
$('#ilovesmybbq p:first').prepend('<span class="label">Note:</span>');