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 要素を作成して挿入するだけですか? それに関する私の問題は、ブレイズやスペースバーを使用しないため、物事を行う流星の方法のようには見えないことです.

この問題に関するヘルプをいただければ幸いです。

EDIT古い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 に答える