Riot JS

gistfile1.txt

<my-communities>
    <h1 class="caddy__heading">
        <a href="#">
            Communities
        </a>
        <a href="javascript:;" class="minimise-community-list-parent">
            <i class="minimise-community-list"></i>
        </a>
    </h1>
    <ul class="caddy__list user-communities-list">
        <li each={ communities } class="caddy__list-item { isSelected() } l-cols l-center-start">
            <img class="facepic facepic--small" style="margin-right: 0.4em;" src="{ avatarUrl() }"/>

            <a href="{ community.slug }">
                <span class="txt-capitalize">{ community.name }</span>
            </a>
        </li>
    </ul>
    <script>
        this.communities = _.map(opts.communities, function(community) {
            var communityFn = function(fn) { return _.bind(fn, community) }

            community.avatarUrl = communityFn(function() {
                return Socialite.util.url.avatar(this.community.avatar);
            });

            community.isSelected = communityFn(function() {
                return this.community.slug == window.location.href.substr(window.location.href.lastIndexOf('/') + 1) ? 'is-selected' : '';
            });

            return community;
        });

    </script>
</my-communities>