index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Backbone Routing</title>
    <link type="text/css" rel="stylesheet" href="/marco/smarthome/css/style.css"/><!--Change URL to your root-->

    <!-- Bootstrap core CSS -->
    <link href="/marco/smarthome/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<section class="col-sm-12">
    <center>
        <h1 class="page-header">The info</h1>
    </center>
    <div id="container">

    <section class="col-sm-4">
        <h2 class="page-header">Users</h2>
        <div id="userinfo">
            <a class="btn btn-default" href="#" data-id="1" >Tim</a>
            <a class="btn btn-default" href="#" data-id="2" >Marco</a>
            <a class="btn btn-default" href="#" data-id="3" >Andreas</a>
            <a class="btn btn-default" href="#" data-id="4" >Amber</a>
        </div>
    </section>

        <section class="col-sm-4">
            <h2 class="page-header">Networks</h2>
        <div id="networkinfo">
            <a class="btn btn-default" href="#" data-id="1" >TimLand</a>
            <a class="btn btn-default" href="#" data-id="2" >CastleMarco</a>
            <a class="btn btn-default" href="#" data-id="3" >HuislijkHuis</a>
            <a class="btn btn-default" href="#" data-id="4" >Hogeschool Rotterdam</a>
        </div>
    </section>

        <section class="col-sm-4">
            <h2 class="page-header">Crownstones</h2>
        <div id="crownstoneinfo">
            <a class="btn btn-default" href="#" data-id="1" >Testding</a>
            <a class="btn btn-default" href="#" data-id="2" >WoonkamerLamp</a>
            <a class="btn btn-default" href="#" data-id="3" >Televisie</a>
            <a class="btn btn-default" href="#" data-id="4" >Radio</a>
        </div>
            </section>
</section>


    <section>
        <div id="InfoBlock">

        </div>
    </section>
    <div id="team-matches">

        <!-- create error template -->
        <script id="template-error" type="text/template">

        </script>
        <!-- create matches template -->
        <script id="template-crownstones" type="text/template">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Crownstone Name</th>
                            <th>Network Name</th>
                            <th>Network URL</th>
                        </tr>
                    </thead>
                    <tbody>
                    <% _.each( rc.models, function( listItem ){%>
                        <tr>
                            <td><%= listItem.attributes.name %></td>
                            <td><%= listItem.attributes.network.name %></td>
                            <td><a href="<%= listItem.attributes.network.url %>"><%= listItem.attributes.network.url %><a/></td>
                        </tr>
                    <%});%>
                    </tbody>

                </table>
        </script>

        <script id="template-users" type="text/template">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Username</th>
                    <th>action</th>
                    <th>time pref</th>
                    <th>date pref</th>
                </tr>
                </thead>
                <tbody>
                <% _.each( rc.models, function( listItem ){%>
                    <td><%= listItem.attributes.name %></td>


                    <td>
                        <ul>
                            <% _.each( listItem.attributes.prefs, function( prefItem ){%>
                                <li><%= prefItem.action %></li>
                            <%});%>
                        </ul>
                    </td>

                <td>
                    <ul>
                        <% _.each( listItem.attributes.prefs, function( prefItem ){%>
                        <li><%= prefItem.time %></li>
                        <%});%>
                    </ul>
                </td>

                <td>
                    <ul>
                        <% _.each( listItem.attributes.prefs, function( prefItem ){%>
                        <li><%= prefItem.date %></li>
                        <%});%>
                    </ul>
                </td>

                </tr>
                <%});%>
                </tbody>

            </table>
        </script>

        <script id="template-networks" type="text/template">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>username</th>
                    <th>email</th>
                    <th>PhoneId</th>
                    <th>Role</th>
                    <th>Linked CrownStones</th>
                </tr>
                </thead>
                <tbody>
                <% _.each( rc.models, function( listItem ){%>
                <tr>
                    <td><%= listItem.attributes.name %></td>
                    <td>
                        <ul><% _.each( listItem.attributes.users, function( user ){%>
                        <li><%= user.email %></li>

                    <%});%></ul></td>

                    <td><ul>
                        <% _.each( listItem.attributes.users, function( user ){%>
                        <li><%= user.phoneId %></li>
                        <%});%>
                    </ul></td>

                    <td>
                        <ul><% _.each( listItem.attributes.users, function( user ){%>
                        <li><%= user.role %></li>
                        <%});%></ul></td>
                    <td>
                        <%= listItem.attributes.crownstones.length %></td>
                </tr>
                <%});%>

                </tbody>

            </table>
        </script>
    </div>
</div>
<script src="/marco/smarthome/dist/bundle.js" type="text/javascript"></script><!--Change URL to your root-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>