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

Trying to inject a table, rows, and cells using CoffeeScript via Google Closure Library

本文关键字：注入 单元格 CoffeeScript 使用 Google Library Closure      更新时间：2023-09-26

我正在努力尝试使用coffeeScript和google闭包库将表，行和列注入HTML页面。如果我不能在coffeeScript中完成，那么我想我可以直接恢复到jQuery或javaScript，所以在代码中提供一些方向也是受欢迎的。

文档不是很有帮助的好闭包库，我是相对较新的coffeeScript。此外，google闭包库的一半命令已弃用或不明确。

任何帮助将不胜感激，以下是当前的HTML，所需的HTML，其次是coffeeScript。

总之，这里是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

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

  • @param {...(Object|string|Array|NodeList)} var_args用于文本节点的进一步DOM节点或字符串。如果其中一个var_args是数组或NodeList，则其元素将作为childNodes添加。

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

  1. 使用(可能嵌套的)数组来表示节点层次结构;

  2. 提供先前创建的任意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上工作。

注释:(在上面的代码块中编号)

  1. 由于@name是字符串，因此不必事先将其包装在文本节点中。goog.dom.createDom将应用所需的转换(由JSDoc声明)

  2. 数组作为第三个参数可以表达任意复杂的DOM层次结构。如果你想在闭包工具上投资，而这种操作对于复杂的DOM来说过于重复或容易出错，那么可以考虑使用闭包模板作为替代。

相关文章：