Meteor，在 cursor.forEach 中正确渲染 HTML答案

【问题标题】：Meteor, properly rendering HTML within a cursor.forEachMeteor，在 cursor.forEach 中正确渲染 HTML
【发布时间】：2014-09-27 03:52:44
【问题描述】：

我从this 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
        )   
    )

每次有新消息进入时记录每条消息非常有用。我感到困惑的部分是如何使用正确的数据填充我的 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

【问题讨论】：

一开始你为什么要这么做？您可以为 HTML 渲染创建另一个光标。
对不起，我不确定你的意思。
你能告诉我们getMessage助手的代码吗？
我添加了getMessages 助手的一小部分。那里有一堆我们用来改变对象的逻辑，但没有什么太花哨的。我试图改变这一点的原因是利用我链接的帖子中提到的Deps.afterFlush。
@apendua，还有什么我可以提供的可以帮助你的吗？目前我们正在为我们的解决方案使用顶部代码块，我将包含更多代码来展示我们在做什么，但它不是一个理想的解决方案，我认为很清楚为什么。

标签： html meteor meteor-blaze spacebars

【解决方案1】：

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

【讨论】：

这有什么价值？返回游标而不是数组有什么好处吗？
当然有！当您将光标与 each 一起使用时，Meteor 足够聪明，可以对渲染的内容应用非常精细的更新。所以像重新排序/添加/删除元素这样的事情只需要尽可能少的更新。如果您改用数组并删除了单个元素，则需要重新渲染整个列表。
我知道 Spark 确实如此，但 Blaze 仍然存在问题吗？
是的，it is still true。不过，当您将其与 Spark 进行比较时，Blaze 可能会更好地处理数组案例。反正只要能用游标就不用数组了。