Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render mustache element as string #171

Open
NachoMoment opened this issue Jan 2, 2019 · 4 comments
Open

Render mustache element as string #171

NachoMoment opened this issue Jan 2, 2019 · 4 comments

Comments

@NachoMoment
Copy link

Is there a way to render a mustache element as a string instead of html? My element's html wraps and is 3 lines long so something like this '{{>my-element}}' doesn't work as the ' char doesn't show up at the end of the 3rd line.

@bradfrost
Copy link
Member

Hey @NachoMoment, thanks for the issue. Is there any way you could provide an example of the wrapping html that's causing an issue? I'm trying to wrap my head around the issue but I'm not sure I understand.

@NachoMoment
Copy link
Author

Sure thing, here is a screen shot of the mustache element being rendered in the chrome dev tools:
wrap-example

As you can see, the first ' character shows up and the first line is a string but since it wraps, the rest of the lines do not get rendered as a string. The two most straight forward solutions to this would be to either have the ability to render it as a string or the ability to disable wrapping.

Let me know if you need anything else, thanks!

@bradfrost
Copy link
Member

Is this typeAheadExample in JSON? Such as:

{
    "typeAheadExample": '<div class="form-group ...">...</div>'
}

If that's the case, breaks aren't allowed in JSON and those tags would need smushed onto one line, like so: <div><label></label><span></span></div>.

But if you're trying to render the actual HTML, you would create a pattern called typeahead.mustache or similar, and be able to write your HTML with as many line breaks and indents as you'd please:

<div class="form-group mol-typeahead-dropdown">
    <label />
    <span />
</div>

Or if typeAheadExample is in JavaScript, you can use template literals to include line breaks and indents in a string.

Sorry again if I'm still not understanding the situation. If you still need help, feel free to provide a bit more context on what you're trying to accomplish and I'll do my best to assist.

@NachoMoment
Copy link
Author

NachoMoment commented Jan 3, 2019

I think we are on the same page, I'm just new to using pattern lab :)
It looks like adjusting the json if I can is what I was looking for, I'm pretty sure it's json. Either way, looks liek it's on my end.
Thanks a lot for your help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants