I am studying how to build meeting web application on express. In the lecture, he uses swig, but I prefer to use jade instead of swig since I am trying to get use to it.
I am trying to convert swig code to jade, I am stuck in these code.
//In swig,
<div class="col-md-12 column list-group">{% for note in notes %}
<div class="list-group-item">
<div>Note from <em><strong>{{ note.memberName }}</strong></em> on: {{ note.createdOn.toDateString() }}
- for project: <strong>{{ note.project }}</strong>
</div>
<div><strong>Work yesterday:</strong> {{ note.workYesterday }}</div>
<div><strong>Work today:</strong> {{ note.workToday }}</div>
<div><strong>Impediment:</strong> {{ note.impediment }}</div>
</div> {% endfor %}
I guess {% for note in notes %} will be like for note in notes in jade file. however, I cannot convert other part such {{note.project}} and other codes start with {{ note..
Can anyone help with it?
Thanks in advance!
According to the Jade reference your foreach loop would look like this: each note in notes. And the properties of note should also be accessible as note.project. At least if they're Javascript objects.
Related
In Python Django we have directive {% with %}
I looking for an analog in Vue 3, but dissapointed
When I use plugins like vue-good-table at page's template I need use code:
<div
v-if="props.row[props.column.field].useCounter"
:class="`severity-${props.row[props.column.field].maxSeverity}`"
>
<span v-if="props.row[props.column.field][lvl] !== 0">
{{props.row[props.column.field][lvl]}}
</span>
</div>
As you can see, props.row[props.column.field] is repeating 4 times!
Does really Vue not contain such a useful feature?
<div
v-with="props.row[props.column.field] as cell"
v-if="cell.useCounter"
:class="`severity-${cell.maxSeverity}`"
>
<span v-if="cell[lvl] !== 0">
{{cell[lvl]}}
</span>
</div>
I removed "main" section with "{{content_for_layout}}" in theme.liquid:
<main role="main">
{{ content_for_layout }}
</main>
Then, I got this error as shown below:
It seems like it's impossible to remove it but I really want to remove it. Are there any ways to remove it? and it's also OK to get the same effect of removing it.
You can comment it out as shown below:
{% comment %}
<main role="main">
{{ content_for_layout }}
</main>
{% endcomment %}
In addition, you can use style="display: none" in the opening main tag:
<main role="main" style="display:none">
{{ content_for_layout }}
</main>
I'm trying to pass django queryset to hidden div as a cvs to allow copy text within div. So far i'm doing this as shown below:
<div class="invisible text-nowrap" id="report" style="white-space: nowrap;" >
{% for item in queryset %}
{{ item.name }},{{ item.priority }}, {{ item.location }} # and so on many times
{% endfor %}
</div>
but method shown above is breaking into new line and it looks as below for instance:
some_name,priority_3,CR LF
main_building
Is there any way to prevent line breaks in line ? I was trying to use '|add' but it is showing error probably beacause of different types of variables in single 'item'. Maybe there is something similar to {{ item.name + item.priority }} or any different solution ? If so please let me know.
Thank you in advance
I’m using Grav modular pages to build a site but can’t find how to target a specific module to add a css class.
I have found this https://learn.getgrav.org/16/content/media but can’t see if there’s a way to do this.
What I’m trying to achieve is have a different background for each modular div in the page.
In the template : shared class for all modules
As a module implies, for its displaying, to browse the paren'ts page collection in the Twig template of that parent, you can add any HTML and CSS there.
For instance, here is one way of looping through the collection :
{% for module in page.collection %}
<section class="module">
{{ module.content }}
</section>
{% endfor %}
In the template : specific class
You can customize the CSS class by playing with a Twig variable. The most secure way is to use the slug of the page, wich has already escaped characters :
{% for module in page.collection %}
<section class="module_{{module.slug}}">
{{ module.content }}
</section>
{% endfor %}
In the markdown
You can use the already existent options to define CSS :
classes: module1
and then use it in the Twig, by using the header() function :
{% for module in page.collection %}
<section class="module_{{module.header.classes}}">
{{ module.content }}
</section>
{% endfor %}
Target a specific module
Now, for targetting a specific module in Twig, you have to import a page.
Here's the generic way of accessing an other page or sub-page content :
{% set imported_page = page.find("/route/to/the/page") %}
You can then use the header() and content() functions to access that imported page's frontmatter and content :
<section class="module_{{imported_page.header.classes}}">
{{ imported_page.content }}
</section>
New to Vue, and I want to loop through each category and then display posts.
<section v-for="(category) in (categoryList)">
<h2>{{category.title}}</h2>
<div v-for="(post) in (sortedActivity, filteredList)">
{{post.title}}
</div>
</section>
Something like the above.
The sortedActivity function is a simple sort and filteredList function is a search.
But how do I parse {{category.title}} to those functions within computed? I assume I want to update the current instance state with the category title? But not sure the easiest way to do that within the loop as it will change. Or if there is another method (not literal)?
Thanks
I assume you wish to first search for a category using filteredList and then sort using sortedActivity. In that case, you can use:
<section v-for="category in categoryList">
<h2>{{ category.title }}</h2>
<div v-for="post in sortedActivity(filteredList(category.title))">
{{ post.title }}
</div>
</section>
However, in general, you should create another sub-component like the following:
<category-posts :category="category" v-for="category in categoryList">
</category-posts>
Where each category-posts would be:
<section>
<h2>{{ category.title }}</h2>
<div v-for="post in sortedActivity(filteredList(category.title))">
{{ post.title }}
</div>
</section>
This would help you keep outer and inner loop separate and avoid recomputation of inner for-loop. Also, do not forget to use key attribute.