Populating a list with directives

Sample is raw javascript, json, and HTML.

JSON Sample

{
    "made-with-title": "made with:",
    "made-with-items": [
        {
            "href": "http://leaverou.github.io/prefixfree/",
            "icon": {
                "src": "media/img/logos/prefixfree.jpg",
                "title": "Prefix-Free"
            }
        },
        {
            "href": "http://modernizr.com",
            "icon": {
                "src": "media/img/logos/modernizr.jpg",
                "title": "Modernizr"
            }
        },
        {
            "href": "http://jquery.com",
            "icon": {
                "src": "media/img/logos/jquery.png",
                "title": "jQuery"
            }
        }
    ],
}

HTML Sample (reference class or data-bind)

<div class="col-md-6">
    <p data-bind="made-with-title"></p>
    <!-- li items will repeat -->
    <ul class="made-with-items">
        <li>
            <a data-bind="link" target="_blank">
                <img class="icon" />
            </a>
        </li>
    </ul>
</div>

JavaScript Sample

directive: {
    "made-with-items": {
        link: {
            href: function () { return this.href; }
        },
        icon: {
           src: function () { return this.icon.src; },
           title: function () { return this.icon.title; }
       }
    }
}

$('#yourpage').render(data, directive);