Question

目前我的代码改编自上述帖子。

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
        )   
    )

每次收到新邮件时，都可以记录每条消息。我很困惑的部分是如何使用正确的数据填充HTML？我目前有以下HTML，它调用模板助手来呈现我的消息。

<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>

我想知道如何调整我目前所拥有的内容以利用我获取消息数据的新方式？我只是以编程方式创建和插入DOM元素吗？我的问题是它看起来不像是流星的做事方式，因为我不会使用大火或空格键。

非常感谢您对此问题的任何帮助。

编辑旧getMessages帮助

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

Answer 1

最好是你的助手返回allMessages光标，而不只是一个数组。如果您需要在呈现HTML之前修改文档，可以使用here所述的transform函数。

Meteor，在cursor.forEach中正确呈现HTML

1 个答案: