Question

我在this tutorial使用meteor 并且应该在聊天框的左上角有一个注册表单。没有某种原因。我的所有代码都与教程相同（或非常相似）但由于某种原因它只是没有显示出来。这是我的代码：

HTML：

<!-- Home Template -->
    <template name="home">
                <div id="box">
          {{> mainBox}}
        </div>
    </template>

<!-- Main Chat Window -->
    <template name='mainBox'>
      <div class='container'>
        <!-- shows login buttons -->
        {{loginButtons}}
        {{> chatBox}}
      </div>
    </template>

<!-- Chat Box with chat messages and the input box -->
    <template name='chatBox'>
      <div id='messages'>
        {{#each messages}}
          {{>chatMessage}}
        {{/each}}
      </div>
      <textarea id='chat-message'></textarea><br>
      <button class='btn' id='send'>Send</button>
    </template>

    <!-- Template for the individual chat message -->
    <template name='chatMessage'>
      <div>
        <b>{{user}}:</b> {{message}}
      </div>
    </template>

使用Javascript：

// render all of our messages in the ui
Template.chatBox.helpers({
  "messages": function() {
    return chatCollection.find();
  }
});

// get the value for handlerbar helper user
Template.chatMessage.helpers({
  "user": function() {
    if(this.userId == 'me') {
      return this.userId;
    } else if(this.userId) {
      getUsername(this.userId);
      return Session.get('user-' + this.userId);
    } else {
      return 'anonymous-' + this.subscriptionId;
    }
  }
});

// when Send Chat clicked at the message to the collection
Template.chatBox.events({
 "click #send": function() {
  $('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
    var message = $('#chat-message').val();
    chatCollection.insert({
      userId: 'me',
      message: message
    });
    $('#chat-message').val('');

    //add the message to the stream
    chatStream.emit('chat', message);
  },

  "keypress #chat-message": function(e) { 
    if (e.which == 13) {
      $('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
      console.log("you pressed enter");
      e.preventDefault();
      //repeat function from #send click event here
      var message = $('#chat-message').val();
    chatCollection.insert({
      userId: 'me',
      message: message
    });
    $('#chat-message').val('');

    //add the message to the stream
    chatStream.emit('chat', message);
    }
  }
});

chatStream.on('chat', function(message) {
  chatCollection.insert({
    userId: this.userId,
    subscriptionId: this.subscriptionId,
    message: message
  });
});

CSS：

body {
    text-align: auto;
    margin: 0 auto;
    max-width: 800px;
    min-width: 800px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}

#box {
    margin-left: 2em;
}

#chat-message {
    border-radius: 0.4em;
    border-color: #e6e6e6;
    height: 40px;
    max-width: 721px;
    min-width: 721px;
    max-height: 300px;
}

#messages {
    border-radius: 0.4em;
    background-color: #ffffff;
    color: #373737;
    min-width: 725px;
    max-width: 725px;
    height: 300px;
    overflow: auto;
    text-indent: 10px;
    letter-spacing: 0px;
    word-spacing: 0.1em;
}

#send {
    width: 120px;
    height: 40px;
    border-radius: 0.25em;
    color: #ffffff;
    background-color: #3EAC3E;
    font-size: 20px;
    font-family: 'Montserrat Alternates', Arial;
    margin-left: 609px;
    margin-top: 0.2em;
}

有谁知道这里有什么问题？

Answer 1

在编码之前，您应该已经完成了这些步骤中的每一步：

$ meteor create awesome-chat-app
$ cd awesome-chat-app
$ meteor remove insecure autopublish
$ meteor add bootstrap accounts-password accounts-ui
$ mrt add streams
$ rm awesome-chat-app.* //remove files added automatically

如果还没有，你现在可以尝试：

$ meteor remove insecure autopublish
$ meteor add bootstrap accounts-password accounts-ui
$ mrt add streams

确保正确安装了所有内容。

Answer 2

如果你升级到Meteor 0.8.0，你需要：

<强> {{＆GT; loginButtons}}而不是{{loginButtons}}

否则您的应用将无法加载（如各方示例）

登录表格消失了？流星教程

2 个答案: