Adding values to ul

[johannes-z]

Is it possible to add the values to a template to achieve the following:
I have an UL with some static content. The values (in my example Entry 1 and Entry 2) should go under the divider.

<ul class="dropdown-menu" role="menu">
    <li><a href="/">Index</a></li>
    <li><a href="/site">Site</a></li>
    <li role="presentation" class="divider"></li>

    <li>Entry 1</li>
    <li>Entry 2</li>
</ul>

[cfaheyCurveJumper]

Hi @johannes-z ,

Can you show us what your data looks like?

[johannes-z]

The data I have looks like that:

[
    {
        "id":"1",
        "name":"Entry 1",
    },
    {
        "id":"2",
        "name":"Entry 2"
    }
]

I want this data to result in something like the given HTML block. Problem is, I can't wrap the the entries in a div - bootstrap defines it's rules on the ul > li elements, so using a div breaks the layout.

Edit: This is what I have so far:

var entries;

entries = [
    {
        "id":"1",
        "name":"Entry 1",
    },
    {
        "id":"2",
        "name":"Entry 2"
    }
];

var directives = {
   entry: {
      html: function() {
         return this.name;
      }
   }
};

$('.container').render(entries, directives);

Template

<ul class="dropdown-menu" role="menu">
    <li><a href="/">Index</a></li>
    <li><a href="/site">Site</a></li>
    <li role="presentation" class="divider"></li>
    <div class="container">
        <li class="entry">
    </div>
</ul>

results in

<ul class="dropdown-menu" role="menu">
  <li><a href="/">Index</a></li>
  <li><a href="/site">Site</a></li>
  <li role="presentation" class="divider"></li>
  <div class="container">
    <li class="entry">Entry 1</li>
    <li class="entry">Entry 2</li>
  </div>
</ul>

[cfaheyCurveJumper]

Hi @johannes-z ,

I think you can do this a little more simply. Here's a CodePen example: http://codepen.io/anon/pen/qdjRxP

I'm rendering the menu using transparency, then prepending the other content.

It's a rough draft, but should get you going. Also, I don't think you even need a directive.

HTH!