jqueryicanhaz.js

ICanHaz.js name each li in a ul?


I am using icanhaz.js templates and I was wondering if anyone knew if it was possible to give a class name to each <li> within a list created by the template?

for example:

 <script id="testLI" type="text/html">
      <li class="list-1">
        <p>Name: {{ name }}</p>
        <p>Here Now: {{ count }}</p>
        <p>ID: {{ id }}</p>
      </li>
  </script>

If I could have each <li> have a class of 'list-1', 'list-2', 'list-3', and so on.


Solution

  • Not sure how you are implementing. But you should loop through your data and in you loop have a counter. Increase the counter each time and place in {{index}}.

    <script id="testLI" type="text/html">
      <li class="list-{{index}}">
        <p>Name: {{ name }}</p>
        <p>Here Now: {{ count }}</p>
        <p>ID: {{ id }}</p>
      </li>
    </script>
    

    Example Loop

    for (var i = 1; i < data_var.length; i++) {
      var data = {
        index: i,
        name: "name",
        count: "count",
        id: "id"
      }
      // Do whatever you need with data.
      // html = ich.listLI(data)
    }