Jsrender: El navegador no respeta el marcado de la plantilla

Creado en 27 may. 2016 · 7Comentarios · Fuente: BorisMoore/jsrender

<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>

Vea 3 bloques comentados en el violín: nada de estos devuelve el contenido correcto.
Parece que el navegador no procesa este bloque como está.
Lo veo como:

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

¿Cómo renderizo esta plantilla?

Ubuntu 15.10: Firefox 46.0.1 / Chromium 50.0.2661.102

Fuente

ba1dr

Todos 7 comentarios

Debe llamar a .render con los datos que necesita en la plantilla.

fielddesc_tpl = $.templates('#tpl_fieldtype');

var tpl_data = {
  fieldname: 'test',
  allfieldtypes: [
    {ftype: 'ft1'},
    {ftype: 'ft2'},
    {ftype: 'ft3'},
    {ftype: 'ft4'}
  ]
}

console.log(fielddesc_tpl.render(tpl_data));

Atentamente.

grma1 en 27 may. 2016

👎1

¿En serio? ¿Alguna vez ha intentado hacer esto en jsfiddle?
Obtengo estas lineas:

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

ba1dr en 27 may. 2016

Comenzaría por eliminar el espacio entre {{y "si" en su plantilla para que el "si" esté inmediatamente adyacente a las llaves (es decir, {{if x == y}} {{: ftype}} { {/si}}). El navegador está convirtiendo su "si" en propiedad de una etiqueta if = ""

gtwilliams03 en 27 may. 2016

👍1

el principal problema era que el motor html analizaba el bloque de código.

prueba lo siguiente:

<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>

grma1 en 27 may. 2016

👍1

Si está haciendo esto en un navegador, su plantilla debe estar en una etiqueta de secuencia de comandos. Y luego debe llamar a render e insertar la cadena resultante en el dom.

JSRender no hace que el dom del navegador entienda de alguna manera su notación {{tag}}. Coloca la plantilla en la etiqueta de secuencia de comandos para que el navegador la ignore.
Luego usa javascript para renderizar la plantilla e insertarla en el dom donde le gustaría.

var model = {
Hola Mundo'
};

var renderizado = $ .template ('# helloworld'). render (modelo);

$ ('cuerpo'). html (renderizado);

El 27 de mayo de 2016, a las 11:55 a.m., Alexey Kolyanov [email protected] escribió:

¿En serio? ¿Alguna vez ha intentado hacer esto en jsfiddle?
Obtengo estas lineas:
            <option value="ft1" {{="" if="" ftype="=" fieldtype="" }}selected{{="" if}}="">ft1</option>
-
Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub o silencie el hilo.

Paul-Martin en 27 may. 2016

👍1

¡Gracias a todos! El problema está resuelto, de hecho utilicé <code> lugar de la etiqueta <script> .. ¿No es html demasiado complejo? :)
La nota sobre la etiqueta <script> debe mencionarse en RED BOLD FONT en cada página.

ba1dr en 27 may. 2016

Gracias a todos, por las explicaciones ...

La información sobre los bloques de secuencias de comandos se encuentra en algunos lugares de los documentos: http://www.jsviews.com/#search ? S = script% 20block. ( @ ba1dr : no estoy seguro de qué temas habías visto).