RESTful API 正在工作，但无法正确呈现 UI（MDC + Sheetsu）答案

【问题标题】：RESTful API is working but not rendering UI correctly (MDC + Sheetsu)RESTful API 正在工作，但无法正确呈现 UI（MDC + Sheetsu）
【发布时间】：2018-02-08 04:58:59
【问题描述】：

我正在使用一个名为 Sheetsu 的服务，它将 Google 表格转换为 RESTful API （非常糟糕！）。无论如何，我将它与MDC Library（材料设计组件）结合使用，但我的 UI 无法正确呈现，因为该服务在运行我的 JS 之后会引入数据。 MDC 提供了函数mdc.autoInit()，它会自动初始化组件，这对于静态网站非常有用..但对于我的用例来说还不够。

我现在有一个肮脏的技巧可以使这项工作..但我正在寻找正确的方法。谁能告诉我如何使用 Sheetsu 正确初始化我的 MDC 组件？

Codepen： https://codepen.io/oneezy/pen/qxayvY

HTML：

<section sheetsu="https://sheetsu.com/apis/v1.0su/1ea3e5b69776">
    <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
         <input type="{{TYPE}}" class="mdc-text-field__input" id="{{ID}}">
         <label for="{{ID}}" class="mdc-text-field__label">{{LABEL}}</label>
    </div>
</section>

JS：

<!-- Libraries -->
<script src="//load.sheetsu.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

$(document).ready(function() {
  setInterval(function(){
    mdc.autoInit();
    dataBind();
  }, 1000);
});

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery ajax api google-sheets

【解决方案1】：

我设法在某种程度上 让它工作，但我确信有更好的方法。在此处发布此答案以希望对其他人有所帮助：D

问题是数据被加载之后一切......所以通过结合使用$.when()和$.done()方法与setTimeout，我能够实现目标。

Codepen： https://codepen.io/oneezy/pen/qxayvY

  function applicationFILE() {
    return $.ajax({
        url: "https://sheetsu.com/apis/v1.0su/c6876062929d"
        // dataType: "json",
        // data:  yourJsonData
    });
  }

  function testFILE() {
      return $.ajax({
          url: "https://sheetsu.com/apis/v1.0su/1ea3e5b69776"
          // dataType: "json",
          // data:  yourJsonData
      });
  }

  $(document).ready(function() {
    $.when(applicationFILE(), testFILE()).done(function(){
      setTimeout(function(){
        mdc.autoInit();
      }, 2000);
    });
  });

【讨论】：