Ist es möglich zu Rendern dust.js Vorlagen synchron?

Bin ich zu schreiben versucht, einen adapter für eine client-seitige HTML - /JS-Template-system zu verwenden dust.js unter der Haube ist. Leider ist die API erwartet render-Vorgänge synchron: die Ausgabe, die zurückgegeben werden sollen in der render () - Aufruf. Dust.js asynchron ist und geht der render-Ausgabe auf eine callback-Funktion. Gibt es eine Möglichkeit, dies zu umgehen, entweder in der Staub-APIs oder durch einige verrückte Javascript-hack?

  • Gute Frage! Ich möchte wissen, die gleiche Sache, weil ich Sie benutzen will dust.js in einer CouchDB "show" - Funktion ( server-Seite ).
  • Tut consolidate.js Hilfe?
  • Leider sieht es so aus das API angeboten consolidate.js nutzt eine callback-Funktion in der gleichen Weise dust.js hat, also ich glaube nicht, dass es hier Hilfe :/
InformationsquelleAutor cliff.meyers | 2012-03-24
  1. 16

    DustJS ist nur noch auszuführen, was asynchron, wenn die Ressourcen es braucht, um zu Rendern (templates, partials) nicht schon alle geladen worden.

    Wenn alle Abhängigkeiten von einer Vorlage geladen werden, bevor Sie ausgeführt, dass die Vorlage dann werde es synchron ausführen (so weit wie ich das beurteilen kann jedenfalls). So etwas wie:

    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.

    Hier ist ein vollständigeres Beispiel unten:
    (und hier ein jsfiddle-link, so können Sie es starten: 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>

    Es könnte Fälle geben (außer die, die ich erwähnt), wo ich falsch bin... ich weiß nicht alles über dustjs.

    • Verifiziert. Das funktioniert, obwohl du musst wirklich vorsichtig sein, nicht etwas tun, was würde die Vorlage entscheiden zu gehen async.
    • Eine Warnung: der Staub.onload (das kann verwendet werden, um lazy load templates/partials) ist nicht die einzige Sache, die asynchrone. Alle benutzerdefinierten Helfer oder Funktionen in Ihrer JSON-Daten lassen sich auch asynchron-durch Aufruf von chunk.Karte und dann machen Sie einen ajax-Aufruf, setTimeout, etc. Daher ist dies definitiv nicht ein full-proof-Lösung.
    InformationsquelleAutor Matt Crinklaw-Vogt
  2. 2

    Auch ich wollte eine Funktion haben, die das akzeptiert einen Kontext und kehrte den Staub gerenderten text. Hier ist die Lösung, die ich kam mit:

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

}

    Nutzung

    var greetingTemplate = getDusterFn('Hello {name}, You are {age} years old!');
greetingTemplate({name: 'Jane', age: 24});
    InformationsquelleAutor Walter Stabosz
  3. 0

    Matt ' s Lösung gab mir einige Tipps, wie Sie schreiben, eine kleine wrapper versteckt, dass die "Hässlichkeit" seiner Lösung (von "Hässlichkeit" meine ich das deklarieren von Variablen außerhalb von Callbacks, die Zuweisung Wert innerhalb Rückruf und Rückgabe außerhalb Rückruf).

    Es nicht nur umschließt das hack in eine kleine Funktion, sondern bindet auch die Vorlagen-Namen. Ich finde das unglaublich hilfreich, wie ich finde mich mit dem gleichen render-Funktion immer und immer wieder, aber ich will nicht angeben der Vorlagen-name jedes mal.

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

    Dies ist, wie es zu benutzen:

    var renderHello = templates('hello.html');
renderHello({ username: 'Stackoverflow' });
//=> <h1>Hello, Stackoverflow</h1>
    InformationsquelleAutor Amberlamps
Schreibe einen Kommentar