js file structure, return values?

Question

Background story: I'm getting into js file structure and building a helper where I get a handlebars template and populating it (to be used in the handlebars driven styleguide tool, fabricator).

My returnTemplate() function returns undefined, and I can't figure out why? it does get to into renderTemplate() and does its thing, but the return value fails to travel all the way back to the button click.

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>

BNilsou · Accepted Answer · 2016-12-22 13:20:26Z

1

The function returnTemplate will return something if your function getTemplate returns something. So you can add return before the instruction callBack($('#demo-template')[0].outerHTML);. In the same way, your callback function must return something : add return before the instruction renderTemplate(data, context); (in the definition of your var callback).

answered Dec 22, 2016 at 13:20

BNilsou

9058 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dejan.S Over a year ago

Awesome. I tried that but missed to add in the callback definition. Thanks.

Dejan.S Over a year ago

One thing though, if I return the $.get(); as intended I don't just get the value, but the whole get function, how do I extract a value?

BNilsou Over a year ago

$.get() is asynchronous, so you can't get immediatly the value (and his return value is the function, as you discovered). I think you'll have to look at Promise, that can do what you want : just go here davidwalsh.name/promises

Collectives™ on Stack Overflow

js file structure, return values?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related