尝试通过 Google Closure Library 使用 CoffeeScript 注入表格、行和单元格答案

【问题标题】：Trying to inject a table, rows, and cells using CoffeeScript via Google Closure Library尝试通过 Google Closure Library 使用 CoffeeScript 注入表格、行和单元格
【发布时间】：2014-06-26 15:35:38
【问题描述】：

我正在努力尝试使用 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>

我希望 HTML 看起来像：

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

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

【问题讨论】：

然后清除所有无效的嵌入 div
好的，HTML 现在应该是有效的，现在有什么建议吗？
我是否正确假设 div propertiesContainer 是 parent？如果是，那么编写的代码将创建类 propertyEditor 的 div，并在将整个内容附加到父级之前添加一个 <label> 和一个 <input> 节点。哪个是您称为“当前 HTML”的输出 - 如果您希望获得表格，则需要更改咖啡脚本代码以创建它们。如果我做了不正确的假设，请告诉我。

标签： javascript jquery html coffeescript google-closure

【解决方案1】：

到目前为止，通过使用goog.dom.createDom 的第三到第n 个参数，您已经完成了将一级子节点添加到节点。这是它的 JSdoc：

@param {...(Object|string|Array|NodeList)} var_args 更多 DOM 节点或文本节点的字符串。如果var_args 之一是数组或NodeList，则其元素将被添加为子节点。

要创建额外级别的子节点，您可以提供两种类型的值作为createDom 的第三个参数：

使用（可能是嵌套的）数组来表达节点层次结构；
提供之前创建的任意 DOM 层次结构的 Node 或 NodeList（使用 goog.dom.createDom 或任何其他生成 Node 或 NodeList 的方法输出）。

根据您的代码，这是您想要完成的最小实现：

###* @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'

看到它在 JSFiddle 上工作。

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

由于@name 是一个字符串，因此不必事先将其包装在文本节点中。 goog.dom.createDom 将应用所需的转换（由 JSDoc 说明）
作为第三个参数的数组可以表示任意复杂的 DOM 层次结构。如果您打算投资 Closure Tools，并且此类操作过于重复或在复杂的 DOM 中容易出错，请考虑使用Closure Templates 作为替代方案。

【讨论】：