Template has Additional DIV wrapped, why?
Opened this issue · 18 comments
Each inserted populated template is wrapped by two layers of div
for example, I have template like this:
<script type="text/html" id="items"> <a data-href="id" data-format="myUrl" data-format-target="href"> <h4 data-content="title"></h4> <p class="ping" data-content="content"></p> </a> </script>
after I inserted it into the DOM, they look like as below,
`
`Who can tell me the reason?
Can you provide a jsfiddle showing the issue, then I can have a look at it?
I'm having the same issue...
I made a jsfiddle, however I couldn't exactly reproduce the same bug...
On my jsfiddle there is only one <div> wrapping the template (even thought there is a wrapper div in my template).
I hope this helps a wee bit.
I finally managed to reproduce the bug: https://jsfiddle.net/ftxxtfqt/
To each item in the array an HTML like this is generated:
<div><div><div class="card">
<img class="img02" src="https://placekitten.com/g/100/100">
<img class="img01" src="/media/especiais/x_mem/pares/jeam_gray.png" data-slug="jean-gray">
</div></div></div>
The nested <div>s come from the recursive invocation of loadTemplate() when array input data is passed.
My pull request #102, which is about suppressing a wrapper element altogether, implicitly also fixes this bug, but only if you turn option noDivWrapper on.
I just amended the PR to fix a bug where the enclosing element of a template wasn't itself processed with setting noDivWrapper on.
@mklement0 Thank you very much!!! I will start testing your code right now!
@mklement0 it works perfectly!!! 👍
@mklement0 : you said "The nested <div>s come from the recursive invocation of loadTemplate() when array input data is passed."
I need to recursive invocate loadTemplate() but I am a bit lost, could you please give me an example of how to do it?
In my case I want to bind to customer data and loop trough notes in a json like this:
{
"customer_data": {
"id": "1",
"name": "John Doe",
"phone": "123456789",
"notes": [
{
"title": "Lorem 1",
"content": "Lorem ipsum ..."
},
{
"title": "Lorem 2",
"content": "Lorem ipsum ..."
},
{
"title": "Lorem 3",
"content": "Lorem ipsum ..."
}
]
}
}
Thank you :-)
@jor77: Assuming you use the code from my PR, and assuming your (jQuery-wrapped) target DOM element is $target, your template is in DOM element with id tmpl, your data object is in variable data, and you want to pass only the notes array to the template:
$target.loadTemplate(
$("#tmpl")
, data.customer_data.notes
, { noDivWrapper: true }
)
Thank you! I will try it in the next hours :-)
I found your code brought about a new bug, when I use your option
noDivWrapper: true
Then the prepend option will have no effect
prepend: true
All elements are just appended to the container.
After I remove
noDivWrapper: true
The prepend option comes back again.
@itimryan: Thanks for pointing that out. I'm not planning on working on this PR any further, but I've added your comment as a caveat to the PR page (#102 ).
Regarding the 2 additional divs it happens to my only in vers 1.5.7, switching back to 1.5.6 the problem is gone... Maybe you guys already know but I didn't see this specified anywhere so I just wanted to highlight that fact.
I'd assumed it came from the change in 1.5.7 based off the changes in that version and the timing but hadn't tested specifically so thanks for confirming.
Should be fairly easy to fix when I get the time
Tnx PB.
I hope you didn't mind... I just inserted a page in the wiki about templateFormatters examples, only one example at the moment, I would like to add more in the future.
That is great, thanks
Confirmed that 1.5.6 doesn't add the extra wrapping divs. Two pens:
1.5.6: http://codepen.io/anon/pen/VjWBpJ
1.5.7: http://codepen.io/anon/pen/bZRKvG
Thank you very much @codepb!
Verified: 1.5.9: http://codepen.io/anon/pen/jAwjJk