JSFiddle - React, Tailwind, and code Playground

by simpleshadow

HTML

<script type="text/x-handlebars" data-template-name="conversations">
    <section class="l-top-nav navigation">{{#linkTo 'conversations'}}Home{{/linkTo}} {{back "Back"}}</section>
    {{#each model}}
        {{#linkTo 'conversation' this}}
            <div>{{this.messages.firstObject.text}}</div>
        {{/linkTo}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="conversation">
    {{#each this.messages}}
        {{#linkTo message this}}<p class="message">{{this.text}}</p>{{/linkTo}}
    {{/each}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="message">
    <img {{bindAttr src="this.captures.firstObject.url"}} />
</script>

JavaScript

var App = Ember.Application.create();

App.Router.map(function() {
    this.resource('conversations', function () {
		this.resource('conversation', { path: ':conversation_id' }, function () {
			this.resource('message', { path: ':message_id' }, function () {});
		});
	});
});

App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('conversations');
    }
});

App.ConversationsRoute = Ember.Route.extend({
    model: function () {
        return App.Conversation.find({"users": {"$in": ["2hbsnf5YkM"]}});
    }
});

App.Conversation = DS.ParseModel.extend({
    messages: DS.hasMany('App.Message')
});

App.Message = DS.ParseModel.extend({
    conversation: DS.belongsTo('App.Conversation'),
    
    captures: DS.hasMany('App.Capture'),
    users: DS.hasMany('App.User'),
    
    text: DS.attr('string'),
    private: DS.attr('boolean')
});

App.Capture = DS.ParseModel.extend({
	message: DS.belongsTo('App.Message'),
	
	file: DS.attr('object'),
	type: DS.attr('string'),
	url: DS.attr('string'),
	geolocation: DS.attr('string')
});