流星聊天-多个房间

Question

I am trying to create an application with multiple chat rooms. At the moment one of the rooms works by sending and receiving messages. However when I route and change template and try send a message in another room the message does not send but the link at the top changes? ie localhost:3000/java?text=hi - It says the message is going to cache.

How can I get messages to send in the other rooms, store in the collection and display? Here is my code: Client.js

// This code only runs on the client
    Meteor.subscribe("messages", {
    onReady: function () {
      scrollToBottom();
      autoScrollingIsActive = true;
    }
  });  


  /* helper code */
    Template.body.helpers({
    recentMessages: function () {
      return Messages.find({}, {sort: {createdAt: 1}});
    },
    /* unread message helper */
      thereAreUnreadMessages: function () {
      return thereAreUnreadMessages.get();
    }
  });

  /*chat window scrolling*/
  Template.message.onRendered(function () {
    if (autoScrollingIsActive) {
      scrollToBottom(250);
    } else {
      if (Meteor.user() && this.data.username !== Meteor.user().username) {
        thereAreUnreadMessages.set(true);
      }
    }
  });
Template.body.events({
"submit .new-message": function (event) {
  var text = event.target.text.value;

  Meteor.call("sendMessage", text);
    scrollToBottom(250);

  event.target.text.value = "";
  event.preventDefault();
},


/* scroll event */
  "scroll .message-window": function () {
  var howClose = 80;  // # pixels leeway to be considered "at Bottom"
  var messageWindow = $(".message-window");
  var scrollHeight = messageWindow.prop("scrollHeight");
  var scrollBottom = messageWindow.prop("scrollTop") + messageWindow.height();
  var atBottom = scrollBottom > (scrollHeight - howClose);
  autoScrollingIsActive = atBottom ? true : false;
  if (atBottom) {        // <--new
    thereAreUnreadMessages.set(false);
  }
},

 "click .more-messages": function () {
  scrollToBottom(500);
  thereAreUnreadMessages.set(false);
}
});

Template.footer.usercount = function () {
  return Meteor.users.find().count();
};

Here is my server.js

// This code only runs on the server
  Meteor.publish("messages", function () {
    return Messages.find();
  });

  // This code only runs on the server
  Meteor.publish("messages_java", function () {
    return MessagesJava.find();
  });

And here is the template code for the "Java room":

    <template name="java">
<!--<h6>This is the Java template</h6>-->
<!--<p>*Put chatroom here*</p>-->
<div class="container">
    <header>
      <h1>ITHub Java Room</h1>
      {{> loginButtons}} 
    </header>

<!-- chat messages here -->
<!--  -->
    <ul class="message-window">
      {{#each recentMessagesJava}}
        {{> message}}
      {{/each}}
    </ul>
    <!-- more-messages button -->
    {{#momentum plugin="fade"}}
      {{#if thereAreUnreadMessages}}
        <button class="more-messages">New Messages &#x25BE;</button>
      {{/if}}
    {{/momentum}}

    <footer>
      {{#if currentUser}}
        <form class="new-message">
          <input type="text" name="text" placeholder="Add a message" autocomplete="off" />
        </form>
      {{/if}}
      <br />
    </footer>

    <hr />
<li class="message-java">
    <div class="username">{{username}}</div>
    <div class="message-text">{{messageText}}</div>
</li>

  </div>

Answer 1

Your template isn't called body , but java , so to attach events you need to add them via Template.java.helpers , like so:

Template.java.events({
"submit .new-message": function (event) {
  var text = event.target.text.value;

  Meteor.call("sendMessage", text);
    scrollToBottom(250);

  event.target.text.value = "";
  event.preventDefault();
},


/* scroll event */
  "scroll .message-window": function () {
  var howClose = 80;  // # pixels leeway to be considered "at Bottom"
  var messageWindow = $(".message-window");
  var scrollHeight = messageWindow.prop("scrollHeight");
  var scrollBottom = messageWindow.prop("scrollTop") + messageWindow.height();
  var atBottom = scrollBottom > (scrollHeight - howClose);
  autoScrollingIsActive = atBottom ? true : false;
  if (atBottom) {        // <--new
    thereAreUnreadMessages.set(false);
  }
},

 "click .more-messages": function () {
  scrollToBottom(500);
  thereAreUnreadMessages.set(false);
}
});

And same thing is with helpers .