Question

背景故事：我正在进入js文件结构并构建一个帮助器，我得到一个把手模板并填充它（用于把手驱动的styleguide工具，制造商）。

我的returnTemplate()函数返回undefined，我无法找出原因？它确实进入renderTemplate()并做了它的事情，但返回值无法一直回到按钮点击。

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

如果函数returnTemplate返回某些内容，函数getTemplate将返回一些内容。因此，您可以在指令return之前添加callBack($('#demo-template')[0].outerHTML);。同样，您的回调函数必须返回一些内容：在指令return之前添加renderTemplate(data, context);（在var回调的定义中）。

js文件结构，返回值？

1 个答案: