对于 Google Wave 小工具，是否存在可以修改 UI 的已定义点？答案

【问题标题】：For a Google Wave Gadget, is there a defined point at which it's ok to modify UI?对于 Google Wave 小工具，是否存在可以修改 UI 的已定义点？
【发布时间】：2013-12-11 09:09:26
【问题描述】：

我希望我的小工具有两种不同的视图：一种是刚刚使用时添加，让用户输入一些信息，并且，一旦他完成了那，另一个根据该信息显示一些数据。

我可以决定我必须在这两个视图中选择哪一个的最早时间点显示是我第一次获得状态时，即处于状态打回来。但是，当我在那里更改 UI 时，它并不总是显示 - 显然有一些时间问题。有时用户界面没有完全显示，有时显示正常，有时显示在前面小工具加载动画。

这是一个简单的测试用例：

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Trivial" height="120">
  <Require feature="wave" />
</ModulePrefs>
<Content type="html">
<![CDATA[
    <script type="text/javascript">
      function createForm () {
        document.write("<div id=\"form\">");
        document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
        document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
        document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
        document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
        document.write("</div>");
      }
    </script>
    <script type="text/javascript">
    function stateUpdated () {
      createForm ();
    }

    function init() {
      if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback (stateUpdated);
      }
    }
    gadgets.util.registerOnLoadHandler(init);
    </script>
  ]]>
  </Content>
</Module>

【问题讨论】：

这段代码中的第二个视图在哪里？
没有其他视图。我试图用这段代码完成的是在加载小工具后动态修改 UI。如果我能做到这一点，我可以使一个或另一个视图出现。但即使是这个简单的测试用例也不能可靠地工作。
我已经为 Wave 开发了。问题可能出在 document.write 中。你可以通过 document.createElement("element") 创建你的元素，然后将它们附加到它们的容器中吗？这可能会解决您的时间问题。

标签： javascript google-gadget google-wave

【解决方案1】：

<script type="text/javascript">
  function createForm () {
    document.write("<div id=\"form\">");
    document.write("Username: <input type=text value=\"whatever\" id=\"user_name\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromUsername()\"><br>");
    document.write("NSID: <input type=text value=\"287312604@N00\" id=\"user_id\">");
    document.write("<input type=button value=\"Go!\" onClick=\"fetchFromNSID()\"><br>");
    document.write("Number of photos: <input type=text value=\"3\" id=\"per_page\">");
    document.write("</div>");
  }
</script>

正如你在http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268文档中看到的那样，

写：将文本字符串写入由 open() 打开的文档流。请注意，该函数将生成一个不一定由 DTD 驱动的文档，因此可能会在该文档的上下文中生成一个无效的结果。

所以使用这种方法并不酷。我推荐你使用一个框架，比如 jQuery，它可以以 DOM 友好的方式创建和添加元素。这将是一个工作方法。

【讨论】：