javascript - RESTful API正常运行，但无法正确呈现UI(MDC + Sheetsu)

我正在使用名为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);
});

在此先感谢您的帮助！

最佳答案

我设法在某种程度上解决了这个问题，但是我确信有更好的方法。在这里发布此答案，希望对其他人有所帮助：D

问题是数据在所有其他内容之后都被加载..因此，通过结合使用$.when()和$.done()方法和w / 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);
    });
  });

关于javascript - RESTful API正常运行，但无法正确呈现UI(MDC + Sheetsu)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48677860/