javascript - loop - ¿Es posible renderizar las plantillas de dust.js de forma sincronizada?

dust js tutorial

Question

Estoy intentando escribir un adaptador para un sistema de plantillas HTML / JS del lado del cliente para usar dust.js debajo del capó. Desafortunadamente, la API espera que las operaciones de procesamiento se realicen de forma sincrónica: la salida renderizada debe devolverse desde la llamada render (). Dust.js es asíncrono y pasa la salida de procesamiento a una función de devolución de llamada. ¿Hay alguna forma de solucionar esto, ya sea en las API de Dust o mediante algún pirateo de JavaScript?

Answer 1

DustJS solo ejecutará las cosas de forma asíncrona cuando los recursos que necesita para renderizar (plantillas, parciales) aún no se hayan cargado.

Si todas las dependencias de una plantilla se cargan antes de ejecutarla, se ejecutará de forma síncrona (por lo que puedo decir). Así que puedes hacer algo como:

var result;
dust.render("tpl", data, function(err, res) {
   result = res;
});
console.log(result); // result will actually already be filled out if dustjs didn''t
// have to go look for resources somewhere.

Aquí hay un ejemplo más completo a continuación: (y aquí hay un enlace jsfiddle para que pueda ejecutarlo: http://jsfiddle.net/uzTrv/1/ )

<script type="text/javascript" src="dust.js"></script>
<script>
    var tpl = dust.compile("Omg {#people} {.} {/people} are here! {>partial/}", "tpl");
    var partial = dust.compile("I''m a partial but I''ve already been included so things still run {how}", "partial");
    dust.loadSource(tpl);
    dust.loadSource(partial);

    var data = {
        people: ["jim", "jane", "jack", "julie"],
        how: "synchronously!"
    };

    var result;
    dust.render("tpl", data, function(err, res) { 
        result = res;
    });
    console.log(result);
</script>

Podría haber casos (además de los que mencioné) en los que estoy equivocado ... No sé todo acerca de dustjs.

Answer 2

La solución de Matt me dio algunos consejos sobre cómo escribir una pequeña envoltura que oculta la "fealdad" de su solución (por "fealdad" me refiero a declarar una variable fuera de la devolución de llamada, asignarle un valor dentro de la devolución de llamada y devolverla fuera de la devolución de llamada).

No solo envuelve el truco en una pequeña función sino que también enlaza el nombre de la plantilla. Encuentro que esto es de gran ayuda ya que me encuentro usando la misma función de renderización una y otra vez, pero no quiero especificar el nombre de la plantilla cada vez.

function templates(template) {
  return function templatesWrapper(data) {
    var result;
    dust.render(template, data, function onRender(err, data) {
      if (err) {
        throw err;
      }
      result = data;
    });
    return result;
  }
}

Así es como se usa:

var renderHello = templates(''hello.html'');
renderHello({ username: '''' });
// => <h1>Hello, </h1>

Answer 3

Yo también quería tener una función que aceptara un contexto y devolviera el texto renderizado en polvo. Aquí está la solución que se me ocurrió:

// This function sets up dust template, and returns a new function "dusterFn()"
// dusterFn() can be passed a Context, and will return the rendered text.
// @param {String} text: The template text.
// @param {String} [name]: The name of the template to register with dust. If none is provided, a random number is used.
// @param {Function} [onError]: A function that is called if an error occurs during rendering.
function getDusterFn(text, name, onError) {

    var dusterFn = null;
    name = name || Math.floor(Math.random() * 99999).toString();
    onError = onError || function (error) { };

    try {

        var compiled = dust.compile(text, name)
        dust.loadSource(compiled);

        dusterFn = function (context) {
            var dustOutput = '''';
            dust.render(name, context, function (error, out) {
                if (error) onError(error);
                dustOutput = out;
            });
            return dustOutput;
        };

    } catch (e) {
        // invalid template syntax 
        e += "/n/nPlease check your template syntax.";
        throw (e);
    }

    return dusterFn;

}

Uso

var greetingTemplate = getDusterFn(''Hello {name}, You are {age} years old!'');
greetingTemplate({name: ''Jane'', age: 24});