values not hbs handlebars example javascript handlebars.js template-engine

javascript - not - Valor predeterminado para un marcador de posición de la plantilla de Handlebars



layout handlebars (4)

¿Puedo especificar un valor predeterminado para un marcador de posición de la plantilla de Handlebars?

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

¿Puedo especificar valores predeterminados para {{método}} y {{acción}} y omitirlos en el objeto que se pasa a la plantilla compilada?


Esta pregunta y su respuesta aceptada son bastante antiguas y se han agregado muchas características y funcionalidades nuevas a los manillares desde que se escribieron.

Logré obtener la funcionalidad de los valores predeterminados mediante el uso de bloques parciales que se publicaron en v4.0.0, por lo que su plantilla terminaría con este aspecto

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

Entonces es solo un caso de pasar tu method y action como parciales haciendo algo como esto:

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

En el html resultante, el método se obtendrá de forma predeterminada y la acción será contact-form.php . Hice una pequeña demostración de esto en codepen: http://codepen.io/andyexeter/pen/LRpJag


Los manillares no tienen "valores por defecto".
Debe usar la instrucción {{if}} para verificar si la propiedad está establecida.

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

O si quieres una sintaxis un poco más limpia, usa el simple ayudante:

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

lo que te permite escribir así:

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


Puede registrar un helperMissing helper al que se llamará cada vez que se defina un valor en su plantilla, pero no en su contexto (útil si no desea que los valores faltantes falle silenciosamente):

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


Aquí está mi solución simple

Primero creamos un ayudante muy básico llamado ''elegir''.

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

entonces lo usamos en la plantilla :)

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

o por supuesto que podemos hacer

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

Así que en tu caso:

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

Espero que ayude a alguien más ya que esto es de 2014 :)