Meteor, properly rendering HTML within a cursor.forEach

Question

I am coming over from this post

Currently I have this code which is adapted from the mentioned post.

Template.messages.rendered = ->
    this.autorun( (c) ->
        document.bottomCheck = false
        if null != chatDiv and chatDiv.scrollTop + chatDiv.offsetHeight >= chatDiv.scrollHeight
            document.bottomCheck = true
        $("#chat-box").empty()
        messageCursor = Messages.find({}, {sort: {time: 1}})
        messageCursor.forEach((message) ->
            makeMessage(message) // Uses jQuery to insert HTML into our page
        )   
        Deps.afterFlush(() ->
            setScrollToBottom() if document.bottomCheck
        )   
    )

This is working great to log each message every time new messages come in. The part I am confused about, is how to I populate my HTML with the proper data? I currently have the following HTML which calls a template helper to render my messages.

<template name="messages" class="message-style">
    <div id="chat-box">
        {{#each getMessages}}
            <div class="chat-message" id="chat-message-scroll" style="background-color: {{backgroundColor}}">
                <div class="row">
                    <div class="col-md-2 message-name">
                        <div class="chat-message-name">{{name}}</div>
                    </div>
                    <div class="col-md-8 message-contents">
                        <!-- <br> -->
                        <div class="chat-message-contents" style="color:{{textColor}}">{{{convertMsg message}}}</div>
                    </div>
                    <div class="col-md-2 message-timestamp">
                        <span class="chat-message-timestamp">

                            {{#if notSystemMsg this.type}}
                                {{#if isBookmarked this._id}}
                                    <i class="fa fa-star" id='chat-full-bookmark'></i>
                                {{else}}
                                    <i class="fa fa-star-o" id='chat-empty-bookmark'></i>
                                {{/if}}
                            {{/if}}
                            {{convertToLocalTime time}}
                        </span>
                    </div>
                </div>
            </div>
        {{/each}}
    </div>
</template> 

I just would like to how how I can adapt what I currently have to take advantage of the new way I am getting my messages data? Do I just create and insert DOM elements programatically? My issue with that is that it doesn't seem like the meteor way of doing things because I wouldn't be using blaze or spacebars.

Any help on this issue would be very much appreciated.

EDIT Old getMessages helper

Template.messages.getMessages = () ->
    ... # Random Logic
    allMessages = Messages.find({}, {sort: {time: -1 }}).fetch()
    ... # Messing with allMessages before returning to the helper

Answer 1

It would be best if your helper returned allMessages cursor, and not just an array. If you need to modify the documents before rendering HTML you can use the transform function as described here.