Jsrender: Le navigateur ne respecte pas le balisage du modèle

Créé le 27 mai 2016 · 7Commentaires · Source: 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>

Voir 3 blocs commentés dans le violon - rien de ceux-ci ne renvoie un contenu correct.
Il semble que le navigateur ne traite pas ce bloc tel quel.
Je le vois comme :

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

Comment rendre ce modèle ?

Ubuntu 15.10 : Firefox 46.0.1 / Chrome 50.0.2661.102

Source

ba1dr

Tous les 7 commentaires

Vous devez appeler .render avec les données dont vous avez besoin sur le modèle.

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

Bien à vous.

grma1 le 27 mai 2016

👎1

Vraiment? Avez-vous déjà essayé de le faire dans jsfiddle ?
J'obtiens ces lignes :

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

ba1dr le 27 mai 2016

Je commencerais par supprimer l'espace entre le {{ et le "if" dans votre modèle afin que le "if" soit immédiatement adjacent aux accolades (c'est-à-dire {{if x == y}}{{:ftype}}{ {/si}}). Le navigateur convertit votre "if" en propriété d'une balise if=""

gtwilliams03 le 27 mai 2016

👍1

le problème principal était que le bloc de code est analysé par le moteur html.

essayez ce qui suit :

<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 le 27 mai 2016

👍1

Si vous faites cela dans un navigateur, votre modèle doit être dans une balise de script. Ensuite, vous devez appeler render et insérer la chaîne résultante dans le dom.

JSRender ne fait pas comprendre au navigateur que c'est la notation {{tag}}. Vous placez le modèle dans la balise de script afin que le navigateur l'ignore.
Ensuite, vous utilisez javascript pour rendre le modèle et l'insérer dans le dom où vous le souhaitez.

modèle var = {
Bonjour le monde'
} ;

var rendu = $.template('#helloworld').render(model);

$('body').html(rendu);

Le 27 mai 2016, à 11h55, Alexey Kolyanov [email protected] a écrit :

Vraiment? Avez-vous déjà essayé de le faire dans jsfiddle ?
J'obtiens ces lignes :
            <option value="ft1" {{="" if="" ftype="=" fieldtype="" }}selected{{="" if}}="">ft1</option>
-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, affichez-le sur GitHub ou coupez le fil de discussion.

Paul-Martin le 27 mai 2016

👍1

Merci à tous! Le problème est résolu, en fait j'ai utilisé <code> au lieu de la balise <script> . Le HTML n'est-il pas devenu trop complexe ? :)
La note concernant la balise <script> doit être mentionnée en RED GOLD FONT sur chaque page.

ba1dr le 27 mai 2016

Merci à tous pour les explications...

Les informations sur les blocs de script se trouvent à quelques endroits dans la documentation : http://www.jsviews.com/#search ?s=script%20block. ( @ba1dr - Je ne sais pas quels sujets vous avez vus).