Browser does not respect template markup

See https://jsfiddle.net/8vfesbgf/1/

<div id="alltemplates" class="hidden">
<code id="tpl_fieldtype">
    <div class="form-group">
        <label>{{:fieldname}}</label>
        <select class="fieldtype form-control" data-name="{{:fieldname}}">
            {{for allfieldtypes}}
            <option value="{{:ftype}}" {{ if ftype == fieldtype }}selected{{/if}}>{{:ftype}}</option>
            {{/for}}
        </select>
    </div>
</code>
</div>

See 3 commented blocks in the fiddle - nothing of these returns correct content. It seems browser does not process this block as is. I see it as:

 {{for allfieldtypes}}
    <option if}}="" }}selected{{="" fieldtype="" ftype="=" if="" {{="" value="{{:ftype}}">{{:ftype}} </option>
{{/for}} 

How do I render this template?

Ubuntu 15.10: Firefox 46.0.1 / Chromium 50.0.2661.102

[Paul-Martin]

If you are doing this in a browser then your template should be in a script tag. And then you need to call render and insert the resulting string in to the dom.

JSRender does not somehow make the browser dom understand it’s {{tag}} notation. You place the template in script tag so that the browser will ignore it. Then you use javascript to render the template and insert it into the dom where you would like.

<script id='helloworld' type='text/x-jsrender'> <span>{{>hello }}</span> </script>

var model = { hello: ‘world’ };

var rendered = $.template(‘#helloworld’).render(model);

$(‘body’).html(rendered);

On May 27, 2016, at 11:55 AM, Alexey Kolyanov [e-mail] wrote:

Really? Have you ever tried to do this in jsfiddle? I get these lines:

            <option value="ft1" {{="" if="" ftype="=" fieldtype="" }}selected{{="" if}}="">ft1</option>

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[grma1]

the main problem was, that the code block is parsed by the html engine.

try the following:

<div id="alltemplates" class="hidden">
    <script type="text/x-jsrender" id="tpl_fieldtype">
        <div class="form-group">
            <label>{{:fieldname}}</label>
            <select class="fieldtype form-control" data-name="{{:fieldname}}">
                {{for allfieldtypes}}
                <option value="{{:ftype}}" {{if ftype === fieldtype}}selected{{/if}}>{{:ftype}}</option>
                {{/for}}
            </select>
        </div>
    </script>
</div>