0

我从这篇文章过来

目前我有这段代码改编自上述帖子。

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
4

1 回答 1

1

如果您的助手返回allMessages光标，而不仅仅是一个数组，那将是最好的。如果您需要在呈现 HTML 之前修改文档，您可以使用此处transform描述的功能。

于 2014-08-04T20:15:18.833 回答