$.repeat()

How it works?

Let's say you have an element, like a <ul> element and you want to add multiple bullets points. This the classic example of a Todo list (our one will be extremely basic). To do this, will need a loop that on each iteration and an item. Hopefully, you don't have to code this yourself because the $.repeat() function is here.

How to use it?

Here are the arguments of the $.repeat() function:

$.repeat(el, array)

el represents the element, in this case, the <ul> element. array is the array of lines, and in this case, this is the array where we have every we have to do on our list. Inside your <ul> element (or whatever element you're using), you'll need to define the repeating pattern. Use { and } to add the content of your array, which will have the name: data. So, if you want to make a simple list:

<div class="repeat">
    <p>{data}</p>
</div>

$.repeat(".repeat", ["Hello", "World"])

You can also use objects inside your array and use the dot . separation to access the data inside your object, as you would do for a normal JSON object.

But here is the code for our Todo list:

HTML:

<!-- Title -->
<h1>Todo-list:</h1>
<!-- The actual list -->
<ul>
    <li>{data}</li>
</ul>
<!-- The preview -->
<div class="preview">
  Preview:
<!--   The rendered preview -->
  <span class="prev" var="exported"></span>
</div>
<!-- The input -->
<input type="text" target="exported"/>
<!-- The button -->
<button>Add</button>

JS:

// Create the variable for DisplayJS
var $ = new DisplayJS(window);
// The preview
var exported = "Start typing!"
// The todo array
var todolist = []
// On click on button
$.on($.select("button"), "click", function() {
//   On clicked, add the content of  the preview to todo list
  todolist.push(exported)
//   Empty the input
  $.valEmpty($.select("input"))
//   The repeat function
  $.repeat("ul", todolist)
  
});
// Rendering targets
$.target();
// rendering the vars once
$.var()

---

⚠️ Questions?

Don't hesitate to ask your questions ⁉️ in the issue part 😁