Javascript 试图通过Google闭包库使用CoffeeScript注入表、行和单元格

我正在努力使用coffeeScript和google闭包库将表、行和列注入HTML页面。如果我不能在coffeeScript中完成它，那么我想我可以直接恢复到jQuery或javaScript，因此也欢迎在代码中提供一些指导

这些文档对goog闭包库没有太大帮助，而且我对coffeeScript还比较陌生。另外，谷歌闭包库的一半命令已被弃用或晦涩难懂

任何帮助都将不胜感激，以下是当前的HTML，所需的HTML，然后是咖啡脚本

无论如何，这里是HTML：

<div id="propertiesContainer" class="propertiesContainer" style="visibility: visible; left: 954.7777862548828px; top: 50.989585876464844px;">
 <div class="propertyEditor">
   <label>label</label>
   <input type="text">
 </div>
 <div class="propertyEditor">
   <label>size</label>
   <input type="text">
 </div>
</div>

---

到目前为止，通过使用

goog.dom.createDom

的第三到第n个参数，您已经完成了向节点添加一个级别的子节点。这是它的JSdoc：

• @param{…（Object | string | Array | NodeList）}var_args

  更多DOM节点或文本节点的字符串。如果其中一个

  var_args

  是数组或节点列表，则其元素将作为子节点添加

要创建其他级别的子节点，可以提供两种类型的值作为

createDom

的第三个参数：

使用（可能是嵌套的）数组来表示节点层次结构

提供以前创建的任意DOM层次结构的节点或节点列表（使用

goog.DOM.createDom

或生成节点或节点列表的任何其他方法输出）

根据您的代码，下面是您想要完成的任务的一个最小实现：

###* @constructor ###
Dummy = ->
  @name = 'some name'
  return

Dummy.prototype =    
  render: (parent) ->
    @title = goog.dom.createDom 'label', {}, @name  # *1*
    @input = goog.dom.createDom 'input', {'type': 'text'}
    table = goog.dom.createDom 'table', {}, [       # *2*
      goog.dom.createDom 'tr', {}, [
        goog.dom.createDom 'td', {}, @title
        goog.dom.createDom 'td', {}, @input
      ]
    ]
    container = goog.dom.createDom 'div', {'class': 'propertyEditor'}, table
    goog.dom.appendChild parent, container

# initialization
dummy = new Dummy
dummy.render goog.dom.getElement 'propertiesContainer'  

看看它在工作

注意：（在上面的代码块中编号）

由于

@name

是一个字符串，因此事先不必将其包装到文本节点中

goog.dom.createDom

将应用所需的转换（由JSDoc声明）

作为第三个参数的数组可以表示任意复杂的DOM层次结构。如果你想投资关闭工具，这种操作过于复杂或容易出错，那么复杂的DOM，考虑作为备选方案。

---

然后清除所有无效的嵌入div。好的，HTML现在应该是有效的，现在有一些建议吗？我假设div

propertiesContainer

是

parent

是否正确？如果是，那么编写的代码将创建类

propertyEditor

的div，并在将整个内容附加到父对象之前向该div添加

和

节点。这就是您称之为“当前HTML”的输出—如果您希望获得表，则需要更改coffeescript代码以创建它们。如果我的假设不正确，请告诉我。

render: (parent) ->
    @title = goog.dom.createDom 'label', null, goog.dom.createTextNode(@name)
    @input = goog.dom.createDom 'input', {'type': 'text'}, null
    container = goog.dom.createDom 'div', {'class': 'propertyEditor'}, @title, @input
    goog.dom.appendChild parent, container
return

###* @constructor ###
Dummy = ->
  @name = 'some name'
  return

Dummy.prototype =    
  render: (parent) ->
    @title = goog.dom.createDom 'label', {}, @name  # *1*
    @input = goog.dom.createDom 'input', {'type': 'text'}
    table = goog.dom.createDom 'table', {}, [       # *2*
      goog.dom.createDom 'tr', {}, [
        goog.dom.createDom 'td', {}, @title
        goog.dom.createDom 'td', {}, @input
      ]
    ]
    container = goog.dom.createDom 'div', {'class': 'propertyEditor'}, table
    goog.dom.appendChild parent, container

# initialization
dummy = new Dummy
dummy.render goog.dom.getElement 'propertiesContainer'