我从这篇文章过来
目前我有这段代码改编自上述帖子。
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