Using assemble, how do I repeat (n)time a block of code {{> imageBox}} that is embedded into pages?
<div>
{{> imageBox }}
</div>
You can certainly iterate over an array of the desired size. For example:
---
blocks:
- one
- two
- three
---
Repeat blocks:
{{#each blocks}}
<div>Block {{this}}</div>
{{/each}}
Results in
Repeat blocks
Block one
Block two
Block three
If you don't care about the values, you can just omit the {{this}} reference.
Related
I have two sections with same lightning-input field. I need error to be shown only to the field which is currently been input by the user.
HTML:
<template for:each ={checks.options} for:item="check">
<ul key={check}>
<lightning-input type="text" data-id={checks.items} label="Numbers"
value={check.totalsize} onclick={valuecheck} onblur={callValidations}>
</lightning-input>
<template if:true={errorMessage}>
{msg}
</template>
<template if:true={successMessage}>
{msg}
</template>
</template>
This number field will be displayed multiple times as it will be iterated with options node. However, at one time I need to show error or success message for one particular node. Can anyone suggest on this?
I've a question about BEM structure. Is it semantically correct to mix elements/modifiers? I have a hero and portfolio module. I want to use an portfolio__item in the hero module, but it should use the base styling of the hero__item. Is this an correct way of doing this, is it 'allowed' to mix these elements?
<section class="hero hero--collage hero--bottom-decoration">
<div class="portfolio__item hero__item hero__item--animated">
<a href="http://www.google.nl">
<div class="hero__hover">
<span class="hero__hover__content h1">Hover title</span>
</div>
<img src="http://www.google.nl" class="hero__image">
</a>
</div>
</section>
<section class="portfolio">
<div class="portfolio__item">
<a href="http://www.google.nl">
<img src="http://www.google.nl" class="hero__image">
</a>
</div>
</section>
You can do whatever you want. But BEM methodology says:
block set namespace
It's a little messy to read this.
I can't understand it at a glance.
The goal of BEM - separate blocks so you don't need write same block again. And the same for styles. With this and modifiers you can reuse and tweak every block you need.
You can mix block and elements
<img src="http://www.google.nl" class="block-name hero__image">
So on 'block-name' you can match styles for every instance. On hero__image or another element you can match unique styles.
You can't create elements of elements
You don't need write 2 lvl. Cause name of your block set namespace.
<span class="hero__hover__content h1">Hover title</span>
Just
<span class="hero__hover-content h1">Hover title</span>
docs: https://en.bem.info/methodology/naming-convention/
"Is it semantically correct to mix elements/modifiers" - I assume you want to place portfolio__item element within the hero block - it's not a good thing. You can nest a block within a block but not block's element within another block's element.
You can use modifiers to hero__item element thought like
<div class="hero__item hero__item--portfolio"></div>
which will change it's style.
I'm working on the simple Meteor Chat application. I have two different collections, textMessages and FS.images. I need to display those element based on time in one flow. Now I submit them both apart from each other and can't figure the way, while looping over them using #each handler.
Template code :
<ul class="list-group">
{{#each messages}}
<li class="list-group-item">
<span class="badge">x</span>
UserN: {{text}}
</li>
{{/each}}
</ul>
<ul class="list-group">
{{#each showImages}}
{{#unless this.isUploaded}}
{{> FS.UploadProgressBar bootstrap=true}}
{{/unless}}
{{> imageItem}}
{{/each}}
</ul>
You can create a helper in the template that would combine both collections results and sort them by date if each user has set of images and text.
If each message has a set of images you can use this package for creating helper for the collection in such a way you can get the set of images for a certain message.
meteor-collection-helpers
Using meteorjs and its templating solution, I need to execute a JavaScript function (as part of callback function), right after the template and the loop to render a dynamic elements (reading from mongodb) is complete.
What is the right approach in meteorjs for this matter?
To me it sounds like the rendered callback would do the job.
<template name="main">
{{> renderCollection}}
</template>
<template name="renderCollection">
{{#each theCursor}}
{{someField}}
{{/each}}
</template>
Template.renderCollection.rendered = function(){
console.log("The collection has just been rendered!")
}
I just started use meteor about a week ago, and I'm trying to write my first app for logging time for a project.
At the end of the day users can go in and log their hours with a single row consisting of 2 drop down select menus. First is the clients drop down. then based on that client (using Session) the 2nd drop down for client projects will auto-populate, and finally allowing you to enter your hours in a text input.
I have this working, but I also need to implement a button so you can add multiple rows at once. Sort of like jQuery Clone() in case the user worked on different clients or client projects.
I tried to re-render the row once newRow is clicked, but then the second row manipulates the first row because I'm assuming they're both referencing the same template.
To simplify? 1) How do I duplicate the below the last one, and 2) How do I use the same template for 1 or more rows and have them not affect each other?
Any thoughts/help is welcome
<form id="add_time">
<template name="row">
<ul>
{{> clientsDD}}
{{> projectsDD}}
{{> hoursAndTasks}}
</ul>
</template>
<p>Add another row
<input type="submit" id="submit_hours" value="Submit"/>
</form>
Template.clientsDD.clients = function() {
return Clients.find({});
}
Template.projectsDD.projects = function(event) {
return Projects.find({"client.clientId" : Session.get("clientSelected")});
}
Template.addHours.events({
'change select[name="clientsDD"]' : function(event){
newClient = $(event.target).val();
Session.set("clientSelected", newClient);
},
'change select[name="projectsDD"]' : function(event){
newProject = $(event.target).val();
}
});
There are two ways in my mind this can be done. As Meteor doesn't require page reloads to update your content. There is nothing to stop you have the row save on completion and then just having a loop which populates the page. Your form becomes something like this:
<form id="add_time">
{{#each rows}}
{{> row}}
{{/each}}
{{> row}}
<input type="submit" id="submit_hours" value="Save and Add Another"/>
<input type="button" id="submit_and_exit" value="Save and Exit"/>
</form>
<template name="row">
<ul>
{{> clientsDD _id}}
{{> projectsDD _id}}
{{> hoursAndTasks _id}}
</ul>
</template>
This would loop through a rows helper which contains your hours data displaying it for editing along with providing a new empty row. This would automatically update on save with no need for any DOM manipulation.
The other option is to duplicate the fields. I'm not aware of a method that allows you to duplicate a template but there's no reason why jQuery clone type function wouldn't work however you'd need to make sure that on saving they are saved separately. clientsDD[] as the input names should be okay as long as you give each group of fields a unique id.
I would personally use the first method thou as IMHO this is the way Meteor is designed to work so you don't have the need to manipulate the DOM as it will seamlessly update with the data store.