在页面加载内容后，我可以通过AJAX将内容加载到Handlebars模板中吗？

Question

我们正在重建一个为客户提供帐户信息中心的应用程序。

仪表板页面会进行大量Web服务调用以获取数据。 在旧的应用程序中，我们将使用服务器端呈现来加载页面，其中包含我们在登录时获得的有关用户的任何信息。 然后我们将进行AJAX调用以填充需要大量额外后端调用的内容。 这让用户可以立即看到一些信息，而无需等待所有数据在他们看到任何内容之前返回。

我们正在考虑在新应用中使用Handlebars 。 我知道可以通过AJAX填充Handlebars模板。

是否可以将页面加载时立即显示的内容与页面加载后通过AJAX加载的内容交错？

例如，给定这样的组件：

我希望组件的所有内容在页面加载时呈现，除了绿色部分。 那部分我想在页面加载后通过AJAX加载。 这是我用Handlebars可以轻松做到的吗？

谢谢！

Answer 1

您可以使用格式独角兽来执行您想要的堆栈溢出，例如：

你的Html：

    <div id="messageLoader">

    </div>
  </body>
  <script type="text/template" id="templateMessage">
    <h2>{title}</h2>
    <p>{message}</p>
    <br>
    <span><Strong>{sign}</strong><span>
  </script>

你的脚本：

String.prototype.formatUnicorn =  function () {
      "use strict";
      var str = this.toString();
      if (arguments.length) {
          var t = typeof arguments[0];
          var key;
          var args = ("string" === t || "number" === t) ?
              Array.prototype.slice.call(arguments)
              : arguments[0];

          for (key in args) {
              str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
          }
      }

      return str;
  };
  var jsonMessage = {title:"Custom Template With Form Unicorn",message:"Stack Overflow Rocks bae !!",sign:"Stan Chacon"};
  let myFirstUnicornTemplate = document.getElementById("templateMessage").text;
  var template = myFirstUnicornTemplate.formatUnicorn(jsonMessage);
  document.getElementById("messageLoader").innerHTML = template;

编辑：这是jsfiddle使用ajax。

希望它有帮助=）