web-dev-qa-db-fra.com

Valeur par défaut pour un espace réservé de modèle de guidon

Puis-je spécifier une valeur par défaut pour un espace réservé de modèle de guidon?

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{method}}" action="{{action}}" class="menu-edit-form">
...                     
    </form>
</script>

Puis-je spécifier des valeurs par défaut pour {{method}} et {{action}} et les ignorer dans l'objet transmis au modèle compilé?

javascripthandlebars.jstemplate-engine
25
MTVS

Le guidon n'a pas de "valeurs par défaut".
Tu devrais utiliser {{#if}} L'instruction pour vérifier la propriété est définie.

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{#if method}}{{method}}{{else}}POST{{/if}}" action="{{#if action}}{{action}}{{else}}/{{/if}}" class="menu-edit-form">
...
    </form>
</script>

Ou si vous voulez une syntaxe un peu plus propre, utilisez l'assistant simple:

Handlebars.registerHelper('safeVal', function (value, safeValue) {
    var out = value || safeValue;
    return new Handlebars.SafeString(out);
});

ce qui vous permet d'écrire comme ceci:

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{safeVal method 'POST'}}" action="{{safeVal action '/'}}" class="menu-edit-form">
...
    </form>
</script>
37
raidendev

Voici ma solution simple

nous créons d'abord une aide très basique appelée "choisir"

    Handlebars.registerHelper('choose', function (a, b) {return a ? a : b;});

nous l'utilisons ensuite dans le modèle :)

<p>
{{choose valueFromData 'default-value-in-template'}}
<p>

ou bien sûr on peut faire

    <p>
    {{choose valueFromData defaultValueFromData}}
    <p>

Donc dans votre cas:

<form method="{{choose method 'get'}}" action="{{choose action 'action.php'}}" class="menu-edit-form">
...                     
    </form>

J'espère que cela aide quelqu'un d'autre puisque cela date de 2014 :)

7
Nick Panov

Cette question et sa réponse acceptée sont assez anciennes et de nombreuses nouvelles fonctionnalités et fonctionnalités ont été ajoutées au guidon depuis qu'elles ont été écrites.

J'ai réussi à obtenir la fonctionnalité des valeurs par défaut en utilisant blocs partiels qui ont été publiés dans la v4.0.0 - de sorte que votre modèle finirait par ressembler à ceci:

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{#> method}}get{{/method}}" action="{{#> action}}index.php{{/action}}" class="menu-edit-form">
...                     
    </form>
</script>

Ensuite, il suffit de passer vos method et action comme partiels en faisant quelque chose comme ceci:

var source = $('#menu-edit-form-tpl').html(),
    template = Handlebars.compile(source),
    html = template({}, {
        partials: {
            action: 'contact-form.php'
        }
    });

Dans le code HTML résultant, la méthode sera par défaut à get et l'action sera contact-form.php. Voici une démo fonctionnelle:

var source = $('#menu-edit-form-tpl').html(),
    template = Handlebars.compile(source),
    html = template({}, {
        partials: {
            action: 'contact-form.php'
        }
    });


// Code below here only to show output.
document.write('<code>' + $("<div/>").text(html).html() + '</code>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{#> method}}get{{/method}}" action="{{#> action}}index.php{{/action}}" class="menu-edit-form">
        ...
    </form>
</script>
7
Andy

Vous pouvez enregistrer un assistant helperMissing qui sera appelé chaque fois qu'une valeur est définie dans votre modèle, mais pas dans votre contexte (utile si vous ne voulez pas que les valeurs manquantes échouent silencieusement):

Handlebars.registerHelper("helperMissing", function(context, options) {
    console.error("Template defines {{" + context.name + "}}, but not provided in context");
    return "{{" + context.name + "}}";
});
3
philipisapain