js Dateistruktur, Rückgabewerte?

Question

Hintergrundgeschichte: Ich gehe in die js-Dateistruktur und baue einen Helfer, wo ich eine Lenkstangenschablone bekomme und bevölkere sie (um in den stangengesteuerten Styleguide-Tool, Hersteller) zu verwenden.

Meine returnTemplate() Funktion gibt undefined, und ich kann nicht herausfinden, warum? geht es in renderTemplate() und macht seine Sache, aber der Rückgabewert kann nicht den ganzen Weg zurück zum Knopf Klick reisen.

jsfiddle

var Button = (function() { 
    function init() { 
    $('.js-template-trigger').on('click', function() { 
     var context = { 
     name: 'John Wick' 
     } 

     var value = TemplateHelper.returnTemplate('demo-template', context); 
     console.log('value:', value); 
    }); 
    } 

    return { 
    init: init 
    }; 
})(); 

$(function() { 
    Button.init(); 
}); 


var TemplateHelper = (function() { 
    function getTemplate(templateId, callBack, context) { 
    //$.get('/data/templates.html#' + templateId).done(callBack); 
    console.log('what is:', $('#demo-template')[0].outerHTML); 

    callBack($('#demo-template')[0].outerHTML); 
    } 

    function renderTemplate(source, context) { 
    console.log('renderTemplate'); 

    var template = Handlebars.compile(source); 
    var html = template(context); 

    console.log('renderTemplate html:', html); 
    console.log('renderTemplate html inner:', $(html).html()); 

    return $(html).html(); 
    } 

    function returnTemplate(templateId, context) { 
    var callBack = function(data) { 
     renderTemplate(data, context); 
    } 

    return getTemplate(templateId, callBack, context); 
    } 

    function appendToTemplate(templateId, context, targetAppend) { 
    var callBack = function(data) { 
     if (data !== undefined) { 
     var html = renderTemplate(source, context); 
     $(html).appendTo($(targetAppend)); 
     } 
    } 

    getTemplate(templateId, callBack, context); 
    } 

    return { 
    returnTemplate: returnTemplate 
    }; 
})(); 

html

<button type="button" class="js-template-trigger">click me</button> 

    <script id="demo-template" type="text/x-handlebars-template"> 
     <div style="height: 50px; width: 100%; background-color: deepskyblue;">{{name}}</div> 
    </script> 

Answer 1

Die Funktion returnTemplate etwas, wenn Ihre Funktion getTemplate kehrt etwas zurück. So können Sie return vor der Anweisung callBack($('#demo-template')[0].outerHTML); hinzufügen. Auf dieselbe Weise muss Ihre Callback-Funktion etwas zurückgeben: Fügen Sie return vor der Anweisung renderTemplate(data, context); hinzu (in der Definition Ihres var-Callbacks).