Skip to content

Populating a table using Transparency and CoffeeScript

miohtama edited this page May 20, 2012 · 1 revision

Here is a simple example how to populate a <table> using Transparency and CoffeeScript

Template:

<table id="checkout">
  <tbody class="products">
    <tr>
      <td data-bind="id" />
      <td>
        <a data-bind="namelink">
      </td>
      <td>
        <span data-bind="price"> EUR
      </td>
    </tr>
  </tbody>
</table>

CoffeeScript:

data = 
    products: [
      id : 1
      price: 100
      name : "Doggy statue"
      link : "#"
    ,
      id : 2
      price: 200
      name : "Catty statue"
      link : "#"
    ]

directives =
    products:
      namelink:
        text: -> return @name
        href: -> return @link

template.render data, directives

Result:

<table id="checkout">
  <tbody class="products">
    <tr>
      <td data-bind="id">1</td>
      <td><a href="#">Doggy statue</a></td>
      <td><span data-bind="price">100</span></td>
    </tr>
    <tr>
      <td data-bind="id">2</td>
      <td><a href="#">Catty statue</a></td>
      <td><span data-bind="price">200</span></td>
    </tr>          
  </tbody>
</table>