登录表单消失了？流星教程 [英] Sign In form disappeared? Meteor tutorial
本文介绍了登录表单消失了？流星教程的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用流星与本教程
，并且应该在聊天框左上方有一个注册表单。没有什么原因。我的所有代码都与教程（或非常相似）相同，但由于某些原因，它并没有显示出来。这是我的代码：
HTML：
<！ - - 主页模板 - >
< template name =home>
< div id =box>
{{> mainBox}}
< / div>
< / template>
<！ - 主聊天窗口 - >
< template name ='mainBox'>
< div class ='container'>
<！ - 显示登入按钮 - >
{{loginButtons}}
{{> chatBox}}
< / div>
< / template>
<！ - 带聊天消息和输入框的聊天框 - >
< template name ='chatBox'>
< div id ='messages'>
{{#each messages}}
{{> chatMessage}}
{{/每个}}
< / div>
< textarea id ='chat-message'>< / textarea>< br>
< button class ='btn'id ='send'>发送< / button>
< / template>
<！ - 个人聊天消息模板 - >
< template name ='chatMessage'>
< div>
< b> {{user}}：< / b> {{message}}
< / div>
< / template>
Javascript：
< （$ {$ b $ messages}：function（）{
return chatCollection.find（）;
}
}）;
//获取handlerbar助手用户的值
Template.chatMessage.helpers（{$ b $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;
}
}
}）;
//当发送聊天点击消息到集合
时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（''）;
//将消息添加到流
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从#send click event here
var message = $（'＃chat-message'）。val（）;
chatCollection.insert（{
userId：'me'，
消息：消息
}）;
$（'＃chat-message'）。val（''）;
//将消息添加到流
chatStream.emit（'chat' ， 信息）;
}
}
}）;
$ b chatStream.on（'chat'，function（message）{
chatCollection.insert（{
userId：this.userId，
subscriptionId：this.subscriptionId，
消息：消息
}）;
}）;
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;
颜色：＃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;
最大宽度：721px;
min-width：721px;
最大高度：300px;
}
#messages {
border-radius：0.4em;
background-color：#ffffff;
颜色：＃373737;
min-width：725px;
max-width：725px;
height：300px;
溢出：auto;
text-indent：10px;
letter-spacing：0px;
word-spacing：0.1em;
}
#send {
width：120px;
height：40px;
border-radius：0.25em;
color：#ffffff;
背景颜色：＃3EAC3E;
font-size：20px;
font-family：'Montserrat Alternates'，Arial;
margin-left：609px;
margin-top：0.2em;
}
有人知道这里有什么问题吗？
$ meteor创建awesome-chat-app
$ cd awesome-chat-app
$ meteor删除不安全的自动发布
$流星添加bootstrap帐户 - 密码帐户 - ui
$ mrt add streams
$ rm awesome-chat-app。* //删除自动添加的文件
$ b $如果你还没有，你现在可以试试：
$ meteor删除不安全的autopublish
$ meteor add bootstrap accounts-password accounts-ui
$ mrt add streams
确保您拥有一切正确安装。
I'm using meteor with this tutorial and there is supposed to be a sign up form at the top left of the chat box. There is not for some reason. All of my code is the same as the tutorial's (or very similar) but for some reason it just isn't showing up. Here is my code:
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;
}
Does anyone know what is wrong here?
解决方案
You should have gone through each and every one of these steps before coding:
$ 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
If you have not, you can now try:
$ meteor remove insecure autopublish
$ meteor add bootstrap accounts-password accounts-ui
$ mrt add streams
To make sure you have everything properly installed.
这篇关于登录表单消失了？流星教程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
