How to Use for Loop Inside Html Template
I Have an Html Template Which I Use in Marionette View. I Pass a Parameter in the Template When I Call It Inside the Render Function. I Want to Add Multiple...
I have an html template which I use in marionette view . I pass a parameter in the template when I call it inside the render function . I want to add multiple div elements depending on the value of the parameter .How can I add for loop inside html template??
<div id="mainArea">
<div data-role="view">
<div id="scrollView" data-role="scrollView" data-stretch="true">
<div id = 'leftArrowImage' class="leftArrowImage">
</div>
<div id = 'mainViewArea'></div>
<div id = 'rightArrowImage'></div>
/* I have passed a variable here named allWidgets. I want to add the number of divs(<div data-role="page" ></div>) equal to the length of allWidgets array. How do I do that*/
</div>
</div>
</div>3 Answers
<link rel="stylesheet" type="text/css" href="Widgets/ReportWidget/styles/scrollLayout.css"/>
<div id="mainArea">
<div data-role="view">
<div id="scrollView" data-role="scrollView" data-stretch="true">
<div id = 'leftArrowImage' class="leftArrowImage">
</div>
<div id = 'mainViewArea'></div>
<div id = 'rightArrowImage'></div>
<% var i;
for i in allWidgets{ %>
<div data-role="page" class="pages" >
</div>
}%>
</div>
</div>
</div>If you talking about(I am not sure that understand the question exactly),Could you try this;
<div id="mainArea">
<div data-role="view">
<div id="scrollView" data-role="scrollView" data-stretch="true">
<div id = 'leftArrowImage' class="leftArrowImage">
</div>
<div id = 'mainViewArea'></div>
<div id = 'rightArrowImage'></div>
<c:forEach var="widget" items="${allWidgets}">
// Here, you can add parameters about widget objects in allWidgets
<div data-role="page" ></div>
</c:forEach>
</div>
</div>
</div>
You must also define the top of your jsp file below code,
<%@ taglib prefix="c" uri=""%>
If you are in Angular use *ngFor where w is now each element in allWidgets array and will create a div for each element. You may need binding around the [data-role].
<div *ngFor="let w of allWidgets">
<div data-role="page"></div>
</div>
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
