Meteor FlowRouter中模板无法渲染

Question

我需要您的帮助来找出我的代码有什么问题。 我有一个分为三个部分的HomeLayout：

1. 头部
2. 侧边栏
3. 主要内容

我有一个“对话列表”；它将在主部分中呈现，其中包含一个名为“One_Conversation”的子部分：当我点击对话时，它会呈现{{link1：}}。

好吧，就在这里没问题：我的问题是当我点击另一个对话时，模板不会被呈现。

这是我的代码： /routes.js

FlowRouter.route('/conversation', {
    name: 'Conversation',

    action(){
        BlazeLayout.render('HomeLayout', {side: 'Messages', main: 'Conversation_list'});
    }
});
FlowRouter.route('/conversation/:idConversation', {
    name: 'oneConversation',
    action(){
        BlazeLayout.render('HomeLayout', {side: 'Messages', main: 'Conversation_list', conversation: 'One_conversation'});
    }
});

/HomeLayout.html

<template name="HomeLayout">

        <div class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
            {{> Header}}

            <div class="app-body">
                <div class="sidebar">
                    {{> Template.dynamic template=side }}
                </div>
                <main class="main">
                    <div class="container-fluid">
                        {{> Template.dynamic template=main }}
                    </div>
                </main>

            </div>
            {{> Footer}}
        </div>
</template>

/Conversation_list.html

<template name="Conversation_list">
<div class="messages">
////code
////code
////...
</div>
 <conversation class="content">
            {{> Template.dynamic template=conversation }}
        </conversation>
</template>

最后，在我的Conversation_list.events中，当我点击对话时。

FlowRouter.go('/conversation/:idConversation', {idConversation:this._id});

这是/OneConversation.html模板

<template name="One_conversation">
    {{#with oneConversation}}

            <div class="contact-profile">
                {{#if isDefault}}
                    <img src="{{contact.profile_pic}}" alt="" />
                    <p>{{contact.first_name}} {{contact.last_name}}</p>

                {{else}}
                    <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
                    <p>{{contactLiveChat.first_name}} {{contactLiveChat.last_name}}</p>
                {{/if}}
                <div class="social-media">
                    <i class="fa fa-facebook" aria-hidden="true"></i>
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                    <i class="fa fa-instagram" aria-hidden="true"></i>
                </div>

            </div>
            <div class="messages">
                {{#each allMessagesOfConversation}}
                    <ul>
                        {{#if isFirst}}

                            <li class="replies">
                                <img src="http://emilcarlsson.se/assets/harveyspecter.png" alt="" />
                                <p>{{message}} </p>
                            </li>
                        {{else}}

                            <li class="sent">
                                <img src="{{contactM.profile_pic}}" alt="" />
                                <p>{{message}}</p>
                            </li>
                        {{/if}}
                    </ul>
                {{/each}}
            </div>


            <div class="message-input">
                <div class="wrap">
                    <input type="text" placeholder="Write your message..." />
                    <i class="fa fa-paperclip attachment" aria-hidden="true"></i>
                    <button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                </div>
            </div>
    {{/with}}
</template>

这是 /OneConversation.js

import { Template } from ‘meteor/templating’;

import ‘./One_conversation.html’;
import {Meteor} from “meteor/meteor”;
var idConversation=’’;
var typeConversation=’’;
var token=’’;
var psid=’’;
Template.One_conversation.onCreated(function One_conversationOnCreated() {
idConversation = FlowRouter.getParam(“idConversation”);
// typeConversation= Session.get(‘typeConversation’);
//
//
// token= Session.get(‘token’);
// psid= Session.get(‘psid’);
// console.log("OneConversation psid: ",psid);
// console.log("OneConversation token: ",token);
//
// psid= FlowRouter.getParam(“psid”);
// console.log("OneConversation psid liveChat: ",psid);

Meteor.subscribe('allConversations');
Meteor.subscribe('allMessages');
Meteor.subscribe('allContacts');
Meteor.subscribe('allHotels');
Meteor.subscribe('allImMessenger');
});

Template.One_conversation.rendered = function () {

};

Template.One_conversation.helpers({
allMessagesOfConversation: function() {

    return Messages.find({idConversation: idConversation},{sort: {createdAt: 1}}).map(function(message) {

        if (message.typeMessage ==="1") {
            message.isFirst=true;
            return message;
        }else {
            return message;

        }
    });

},
oneConversation: function() {

    return Conversations.findOne({_id: idConversation});


},
});

Template.One_conversation.events({
‘click .submit’(event,instance) {

    const message = $(".message-input input").val();
    if($.trim(message) === '') {
        return false;
    }

    if(Session.get('typeConversation') ==='facebook'){
        Meteor.call("sendMessage",Session.get('token'),Session.get('psid'),message, function (er) {
            if (er) {
                console.log("send message problem");
                console.log(er);
            } else {
                console.log("message sended successfully");
                $(".message-input input").val('');
            }
        });
    }else{
        var newMessageInfo = {
            idSender: Session.get('psid'),
            message: message,
            type: "liveChat",
            createdAt: new Date(),
            idConversation: Session.get('idConversation'),
            status: "seen",
            typeMessage: '1'
        };
        Meteor.call('insertMessages', newMessageInfo, function (er) {
            if (er) {
                console.log("insert problem");
                console.log(er);

            } else {
                console.log("message added successfully", "success");
                $(".message-input input").val('');

            }

        });
    }
},
});

我做错了什么？

- Ilyes Atoui

---

尝试使用 FlowRouter.go(\/conversation/{this._id}`);`。 - Michel Floyd

不能这样做，URL中的ID可以无问题更改；我的问题是在URL更改后模板没有被渲染。 - Ilyes Atoui

你把数据加载到模板的哪里了？应该在某处使用.find()方法... - Michel Floyd

好的，我会编辑我的帖子并添加缺失的代码。 - Ilyes Atoui

我尝试过了，但是没有办法复现这个问题。示例代码中引用了许多在HTML中未与JS代码一起发布的帮助程序，并且也没有添加任何出版物和集合。错误的来源可能随处可见，从模板命名中的拼写错误到错误的发布/订阅（请注意#with在此处是可疑的）。如果您想解决此问题，您可以首先检查所有依赖于该问题的代码。也许这已经让您自己找到了解决方案。 - Jankapunkt

Answer 1

问题已经解决了，我的问题出在idConversation上；

我在会话中设置了会话的ID，即conversationList.events，并在oneConversation助手中获取它，所以代码变成了这样。

/Conversation_list.js

import { Template } from 'meteor/templating';
import './conversationList.html';
import {Meteor} from "meteor/meteor";

    Template.conversationList.onCreated(function conversationListOnCreated() {
        Meteor.subscribe('allConversations');
        Meteor.subscribe('allMessages');
        Meteor.subscribe('allContacts');
        Meteor.subscribe('allHotels');
        Meteor.subscribe('allImMessenger');
    });
    var psid="";
    var token="";

    Template.conversationList.rendered = function () {
    };

    Template.conversationList.helpers({
        toUpperCase: function(str) {
            return str.toUpperCase();
        },
        allMessagesOfConversation: function() {
            return Messages.find({idConversation: Session.get('conversationId')},{sort: {createdAt: 1}}).map(function(message) {
                if (message.typeMessage ==="1") {
                    message.isFirst=true;
                    return message;
                }else {
                    return message;
                }
            });
        },
        oneConversation: function() {
            return Conversations.findOne({_id: Session.get('conversationId')});
        },

        allConversations: function() {
            return Conversations.find({idHotel: Hotels.findOne({contractId: Meteor.users.findOne({_id: Meteor.userId()}).profile.contractId})._id,archived:false},{sort: {createdAt: -1}}).map(function(conversation, index) {
                if (index === 0) {
                    conversation.isFirst = true;
                }
                if(conversation.typeConversation === 'facebook'){
                    conversation.isDefault = true;
                }
                return conversation;
            });
        },
    });

    Template.conversationList.events({
        'click #archive'(event){
            Meteor.call('archiveConversation',Session.get('idOneConversation'),function (err) {
                if(err){
                    console.log(err);
                }else{
                    FlowRouter.go('/conversation');
                }
            })
        },
        'click .contact'(event,instance) {
            event.preventDefault();
            if($("#contact_active").hasClass("active")){
                $("#contact_active").removeClass("active");
                $("#contact").addClass("active");
            }else{
                $("#contact").removeClass("active");
                $("#contact_active").addClass("active");

            }
            Session.set('typeConversation',this.typeConversation);
            if(this.typeConversation === 'facebook'){
                const pageId = this.idPage;
                console.log(pageId);
                token = ImMessenger.findOne({pageId: pageId}).pageAccessToken;
                Session.set('token', token);


                psid = this.contact().idFacebook;
                Session.set('psid', psid);

                Session.set('conversationId', this._id);

            }else{
                psid = this.contactLiveChat()._id;
                Session.set('idContactLiveChat', psid);
                Session.set('conversationId', this._id);
            }

            FlowRouter.go('/conversation/:idConversation', {idConversation:this._id});
            Session.set('idOneConversation',this._id);

        },
        'click .profile-img'(event) {
            event.preventDefault();
            $("#status-options").toggleClass("active");
        },
        'click .expand-button'(event) {
            event.preventDefault();
            $("#status-options").toggleClass("active");
        },
        'click .status-options ul li'(event) {
            event.preventDefault();
            $("#profile-img").removeClass();
            $("#status-online").removeClass("active");
            $("#status-away").removeClass("active");
            $("#status-busy").removeClass("active");
            $("#status-offline").removeClass("active");
            $(this).addClass("active");

            if($("#status-online").hasClass("active")) {
                $("#profile-img").addClass("online");
            } else if ($("#status-away").hasClass("active")) {
                $("#profile-img").addClass("away");
            } else if ($("#status-busy").hasClass("active")) {
                $("#profile-img").addClass("busy");
            } else if ($("#status-offline").hasClass("active")) {
                $("#profile-img").addClass("offline");
            } else {
                $("#profile-img").removeClass();
            };
            $("#status-options").removeClass("active");
        },
    });

这是

/oneConversation.js

import { Template } from 'meteor/templating';
import './oneConversation.html';
import {Meteor} from "meteor/meteor";
var idOneConversation='';
var typeConversation='';
var token='';
var psid='';
Template.oneConversation.onCreated(function oneConversationOnCreated() {
    idOneConversation = FlowRouter.getParam("idConversation");
    Session.set('idOneConversation',idOneConversation);

    Meteor.subscribe('allConversations');
    Meteor.subscribe('allMessages');
    Meteor.subscribe('allContacts');
    Meteor.subscribe('allHotels');
    Meteor.subscribe('allImMessenger');
});

Template.oneConversation.rendered = function () {

};

Template.oneConversation.helpers({
    allMessagesOfConversation: function() {

        return Messages.find({idConversation: Session.get('idOneConversation')},{sort: {createdAt: 1}}).map(function(message) {

            if (message.typeMessage ==="1") {
                message.isFirst=true;
                return message;
            }else {
                return message;

            }
        });

    },
    oneConversation: function() {

        return Conversations.findOne({_id: Session.get('idOneConversation')});


    },
});

Template.oneConversation.events({
    'click #archive'(event){
        Meteor.call('archiveConversation',Session.get('idOneConversation'),function (err) {

        })
    },
    'click .submit'(event,instance) {

        const message = $(".message-input input").val();
        if($.trim(message) === '') {
            return false;
        }

        if(Session.get('typeConversation') ==='facebook'){
            Meteor.call("sendMessage",Session.get('token'),Session.get('psid'),message, function (er) {
                if (er) {
                    console.log("send message problem");
                    console.log(er);
                } else {
                    console.log("message sended successfully");
                    $(".message-input input").val('');
                }
            });
        }else{
            var newMessageInfo = {
                idSender: Session.get('idContactLiveChat'),
                message: message,
                type: "liveChat",
                createdAt: new Date(),
                idConversation: Session.get('idOneConversation'),
                status: "seen",
                typeMessage: '1'
            };
            Meteor.call('insertMessages', newMessageInfo, function (er) {
                if (er) {
                    console.log("insert problem");
                    console.log(er);

                } else {
                    console.log("message added successfully", "success");
                    $(".message-input input").val('');

                }

            });
        }
    },
});

- Ilyes Atoui