kirbysayshi / vash

Vash, the 60 billion double-dollar template-maker. Razor syntax, for JavaScript templates
Other
524 stars 60 forks source link

Feature Request: Add support for render method #114

Closed codewithtyler closed 6 years ago

codewithtyler commented 7 years ago

We've currently got the vash.helpers.include method which acts similar to the @{ Html.RenderPartial()} method. However, it'd be nice if there was an actual render method that would just allow you to render vash syntax that is not part of a partial.

Use Case: I'm wanting to try and build a Vash playground, similar to the one made for EJS. To do this I need to be able to render any vash code that someone writes in the editor. Having a render method would allow me to do this.

kirbysayshi commented 7 years ago

Interesting idea! I'm not sure I understand how this would work though. Are you asking for a vash helper that accepts vash markup as a string?

codewithtyler commented 7 years ago

Yes, so here's a more detailed example of how I imagined the it being used in my use case.

First I'd build a textarea and div like so:

<textarea rows="6" cols="40" id="textarea"></textarea>
<div id="output">@vash.helpers.render(markup);</div>

Then the user enters the following example into the text area:

@if(model.type){
    <h1>I'm a @model.type!</h1>
} else if(model.name){
    <h2>My name is @model.name.</h2>
} else {
    <h3>I DON'T KNOW WHO OR WHAT I AM...</h3>
}

I then want to be able to add code like this:

var textarea = document.querySelector('#textarea');
var markup = textarea.innerHTML;

Using the render helper method the output should show either a h1, h2, or h3 element depending on what's passed into it.

codewithtyler commented 6 years ago

@kirbysayshi what are your thoughts on this?

kirbysayshi commented 6 years ago

@tylerbhughes If I'm understanding you correctly, I'm not sure why this needs to be a supported helper. I think you could support this yourself using the existing vash API!

For example, there is nothing stopping you from doing something like this in your template:

var vash = require('vash');
var textarea = document.querySelector('#textarea');
var markup = textarea.innerHTML;

var tpl;
try {
  tpl = vash.compile(markup);
} catch (e) {
  alert('Sorry, that's invalid vash markup!');
}

var previewArea = document.querySelector('#preview');
previewArea.innerHTML = tpl(sampleModel);
kirbysayshi commented 6 years ago

I'm going to close this, but feel free to reopen if this answer is not adequate!