Support for Mustache templates

I've recently started using the Mustache html templating system. My html files used to contain a lot of php code which made them difficult to read and also not supported in BSS other than in custom code.

Mustache templates include placeholders which are replaced at run time by actual values. Typically, a separate php script loads all the replacement values into an array and passes it to the Mustache rendering function when the page is loaded. This makes for great separation between html and php code. The Mustache placeholders consist of identifiers delimited by {{ and }} characters.

Bootstrap can already support this if the placeholder is part of an attribute such as title or value since I can just type it in. However, there are other uses for the placeholders which require them to be standalone text not within any html tag and I don't think I can do this in BSS. Closest I can get is a tag but that won't work in this context.

In some respects, this is similar to the request to allow php code within BSS, except that this text requires no validation, it's simply a string enclosed in the delimiters which has no significance to BSS.

I would like to suggest that support for Mustache be incorporated into BSS.

Thanks, Pete

Sorry but this is bootstrap studio - not mustache studio, why would the developers spend time developing on a frame work that is different to its core framework.

If you want to use his tool and use moustache then I suggest using custom code to manage.

<rant>Maybe it's just my way of thinking but I'm getting bored of users asking for the devs to support other frameworks/templates when this tool is already powerful and allows users to lots of thing already. </rant>

Chris, Mustache is not a framework, perhaps you should have read up on it before replying. I'm well aware of the custom code feature; this is a suggestion for improving BSS which I thought was the whole point of the Ideas forum whose description is "See all awesome ideas for improving our app here. We turn these into features in the next releases.".

I understand what you're getting at phaworth, and it would probably be a pretty good addition to the app, but in Chris's defense you did call it a templating system. I wouldn't have looked it up either and would have answered the same had I been home to do so, and I get just as frustrated as Chris does when people ask to have other frameworks added to the app as well. Sounds like what you're asking for is a work around system for PHP includes or something on that order. That would be great, but is it necessary with BSS? I don't know the context of what it is you're needing a site to do so it's hard to know if the idea is something necessary. Examples of usage would go a long way into the devs, and users too for that matter, knowing if it's something useful to all or just to you.

Yes my bad for not actually reading up on it but my comment still stands As you can do something with bootstrap studio already but it has to be custom code.

Who knows when SASS is supported when BS4 is properly release it may be possible as I would like for variables to be added to stream line my workflow.

Thanks Jo. I purposely called Mustache a template system to differentiate it from a framework, which in my mind is a totally different beast.

I agree that BSS should not be particularly interested in interfacing with other full frameworks like any of the PHP frameworks out there but that's not what Mustache is. In fact, you pretty much nailed its usefulness within BSS since it provides a way round the requests for including php code in BSS, which is why I think the ability use it in BSS would be useful. I'll give a couple of examples as you requested.

A simple Mustache template file might look something like this:

   <title>Mustache Example</title>
      <div class="form-group">
         <label class="control-label">Name </label>
         <input class="form-control" type="text" value="{{Name}}">

Note the string "{{Name}}". Prior to using Mustache, that would have been a php code snippet to load a value from a database, for example.

The php file associated with the template would look something like this.

   //Get stuff from the database and put it into $dbarray
   $template = $mustache->loadTemplate('msExample');
   echo $template->render($msArray);

No php code in the template file (which would be the BSS file), no html code in the php file, good code separation, easier to read and edit and the need for php code in BSS goes away.

In that example, I can do what I want in BSS since the placeholder {{Name}} is within a value attribute so I just need to type it into Bootstrap. However, here's another example which I don't believe can be done in BSS.


In this case {{#Customers}} and {{/Customers}} indicate the start and end of a section of html to be repeated for each key in the Customers array supplied to the Mustache render function, replacing the {{Account}} and {{Name}} placeholder with the values from the current Customers array key. Prior to Mustache, that whole section would have been inline php code to do the same thing or an include statement, neither of which are possible in BSS without resorting to custom code.

In this case, the placeholders are raw text strings in the html file and I don't believe BSS provides a way to do that. If it does, great, I welcome it and no need for any extra support from BSS.

Basically, with the addition of some sort of BSS raw text component with no validation or intelligent editing required, the need for php code in BSS goes away and it could be useful for other text strings, e.g. html comments. The BSS files become the Mustache templates, and the php script files can be created and maintained with your favorite editor.

I hope that explains the reason for my request and shows the difference between Mustache and a framework.

Yes I do see the benefit now now that you have explained it in detail ?

Thinking about this more, this isn't a request for support for Mustache, it's a request for a component that allows for a text string to be specified outside of any html tags. Could be used to insert html comments for example.

There is the custom code component that will allow that but the only drawback will be no drag and drop for those blocks.