Crear función helper en el template

A veces cuando ingresamos datos en una plantilla, estos no tienen el formato que esperamos. En estas situaciones tendrás que crear funciones personalizadas para formatearlo.

Si usted está usando por ejemplo handlebars, es mas fácil registrar una función auxiliar, pero en otras soluciones, como underscore no ofrecen esa funcionalidad. Vas a tener hace el tuyo propio.

La razón por la que esto no es tan simple como podría parecer se debe a que la mayoría de las bibliotecas de templates harán que el objeto de datos que le pasamos se pase a la función de la template con el valor de "this" como contexto. Por lo tanto, la función necesita ser parte de este objeto. Hay un par de maneras de solucionar esto. El camino principal es añadir la función para el objeto de datos antes de pasarla a la función de plantilla. ejemplo:

// assume data object and template function

data.formatPrice = function (priceInCents) {

    return "$" + (priceInCents / 100).toFixed(2);

}

var html = template(data);

Esto es ideal para ciertas situaciones, pero es posible que usted tengamos varios conjuntos de templates, cada cual tiene su propio conjunto de funciones auxiliares. Lo que me gustaría hacer en estos casos es envolver la función de plantilla en otra función que se aplicará a los helpers del objeto data.

 

var productTemplate = function (data) {

    var template = _.template("the template string");

    data.helperFunction1 = function () { return "whatever" };

    return template(data);

};

 

Hay varias maneras de mejorar esto (puedes comenzar con el almacenando en el caché en "raw" la función del template, fuera de esta función), pero seria la idea básica. Ahora, puedes simplemente pasar los datos a ese productTemplate y tener acceso a las funciones helpers