Template won't be rendered in Meteor FlowROuter

#1

hi guys, I need your help to figure out what’s wrong with my code
i have a HomeLayout devided to 3 sections;

  1. header
  2. side
  3. main

    I have a conversation list ; it will be rendered in the main section and it contain a subsection called One_Conversation : when I click on conversation it’s rendered

    well right here it’s ok : my problem that when i click on another conversation , the template won’t be rendered

this is my code :
/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

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

and finnaly in my Conversation_list.events when I click to conversation

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

this is /OneConversation.html Template

<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>

and this is /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('');

                }

            });
        }
    },
});

what’s i am doing wrong ?

#2

What you want to do is pass id of the active conversation as data down through the Conversation_list into One_conversation template. When data changes from upstream, the child component will re-render.

The other way to do it is for the One_conversation template to use the :idConversation route parameter directly in a helper, which will re-run on changes.

We can help you more if you post the One_conversation template’s code (html and js)

1 Like
#3

ok i will edit my post and add the missing code