Wie kann ich Lenker-Helfer im Browser mit normalen Lenkern verwenden?

Question

Ich beginne gerade mit lenkernjs und erfuhr über Lenker-Helfer: https://github.com/helpers/handlebars-helpers

Aber ich bin nicht sicher, wie man das in einem Browser funktioniert. Die Beispiele scheinen für eine Schluckakte zu sein. Ich bemerke auch, dass es einen Bereich hat, um es im Browser zu funktionieren: , und gehe zur Arbeitsdemo Ich sehe die generierte js, über die ich rede: https://doowb.com/handlebars-helpers-browserify-example/app.js Also habe ich versucht, das nur zu meinen js Referenzen nach Lenker hinzuzufügen:

<script src="~/lib/handlebars/handlebars.js"></script> 
<script src="https://doowb.com/handlebars-helpers-browserify-example/app.js"></script> 

Aber in meiner Vorlage, wenn ich versuche und Referenz hinzufügen {{add @index + 1}}. Ich bekomme einen Fehler in der Konsole. Und hier ist mein Template-Code:

 var source = $("#questions-template").html(); 
     var template = Handlebars.compile(source); 

     var questionData = JSON.parse('{ "questions":data }'); 
     var html = template(questionData); 
     $("#questions-template-output").html(html); 

ich ziemlich neu bin schlingen und andere Pre/Post-Processing Sachen. Ich habe das Gefühl, dass mir etwas offensichtlich fehlt. Was muss ich tun, damit dies funktioniert?

Answer 1

Hier ist ein Beispiel für das, was ich vorschlage. Führen Sie dies in der Chrome-Konsole oder in jsfiddle aus.

let element = document.createElement('div') 
let randomArray = ['help', 'chocolate', 'eagle']; 
let name = window.prompt("What's your name?", "World"); 
// remove the .join() below and see what happens :) 
element.innerHTML = ` 
    <h1>Hi, ${name}! This element is looping</h1> 
    ${randomArray.map((item, i) => ` 
    <div>I am ${item}, item number ${i}</div> 
    `).join('')} 
` 
document.body.append(element); 

Sie werden vielleicht nicht Ihr Projekt an diesem Punkt zu ändern, aber es ist wahrscheinlich eine gute Idee, um wenigstens langsam von Lenker zu JavaScript Template-Literale zu bewegen. Lenker hat viele Einschränkungen, in die Sie weitergeraten werden, und Sie müssen sich mit Helfern herumschlagen, die Sie bereits gesehen haben, sind nicht einfach. Dieser Code ist jedoch alles JS und HTML, die Sie bereits kennen.

Für weitere Informationen gibt es Wes Bos' blog, die MDN und this random gist.