Javascript 对于GoogleWave小工具，是否有一个定义点，在该点'；修改用户界面可以吗？

我希望我的小工具有两种不同的视图：一种是刚刚安装的时候 添加，让用户输入一些信息，并且，一旦完成 这是另一个基于该信息显示一些数据的程序

我最早可以决定我必须从这两种观点中选择哪一种 显示是当我第一次获得状态时，即处于状态 回拨。但是，当我在那里更改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>

函数createForm（）{
文件。填写（“”）；
文件。写入（“用户名：”）；
文件。写（“
”）；
文件。编写（“NSID:”）；
文件。写（“
”）；
文件。书写（“照片数量：”）；
文件。填写（“”）；
}
函数状态更新（）{
createForm（）；
}
函数init（）{
if（wave&&wave.isInWaveContainer（））{
wave.setStateCallback（状态更新）；
}
}
gadgets.util.registerOnLoadHandler（init）；
]]>

函数createForm（）{
文件。填写（“”）；
文件。写入（“用户名：”）；
文件。写（“
”）；
文件。编写（“NSID:”）；
文件。写（“
”）；
文件。书写（“照片数量：”）；
文件。填写（“”）；
}

正如你在文件中看到的

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

---

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

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

<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>