Question

我正在创建一个即时消息应用程序，我有一点麻烦路由它。所以，一旦你进入应用程序。有可用用户列表。您可以单击用户并开始聊天。我遇到的问题是，一旦我点击发送，控制台显示一个未捕获的TypeError：无法读取undefined的属性'value'。我不知道我在这里做错了什么。另外，我需要帮助显示上面发送的聊天消息。好像你可以看到最近和以前的消息。这是我的代码。任何例子和帮助都会很棒。

HTML minstant

<body>
</body>

<!-- this is the main template used by iron:router to build the page -->

<template name="ApplicationLayout">
{{> yield "header"}}

<div class="container">
{{> yield "main"}}
</div>
</template>

<!-- top level template for the nav bar -->
<template name="navbar">
 <nav class="navbar navbar-default">
   <div class="container-fluid">
    <div class="navbar-header">
     <a class="navbar-brand" href="/">
      Minstant!
     </a>
    </div>
   <div class="nav navbar-nav">
   {{> loginButtons}}
   </div>
  </div>
 </nav>
</template>

<!-- Top level template for the lobby page -->
<template name="lobby_page">
 {{> available_user_list}}
</template>

<!-- display a list of users -->
<template name="available_user_list">
 <h2>Choose someone to chat with:</h2>
   <div class="row">
    {{#each users}}
    {{> available_user}}
    {{/each}}
   </div>
</template>

<!-- display an individual user -->
<template name="available_user">
    <div class="col-md-2">
      <div class="user_avatar">
        {{#if isMyUser _id}} 
        <div class="user_avatar">{{getUsername _id}} (YOU)
            <br/>
            <img src="/{{profile.avatar}}" class="avatar_img">          
        </div>
        {{else}}
        <a href="/chat/{{_id}}">
            {{getUsername _id}}
            <br/>
            <img src="/{{profile.avatar}}" class="avatar_img">
        </a>
        {{/if}}
    </div>
 </div>
</template>


<!-- Top level template for the chat page -->
<template name="chat_page">
  <h2>Type in the box below to send a message!</h2>
    <div class="row">
     <div class="col-md-12">
        <div class="well well-lg">
        {{#each recentMessages}}
        {{> message}}
        {{/each}}
        </div>  
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
        <form class="new-message">
        <input class="input" type="text" name="chat" placeholder="type a message here...">
        <button class="btn btn-default">Send</button>
    </form>
    </div>
  </div>
</template>

<!-- simple template that displays a message -->
<template name="message">
 <div class = "container">
    <div class = "row">
        <div class = "username">{{username}}
            <img src="/{{profile.avatar}}" class="avatar_img">
        </div>
        <div class = "message-text"> said: {{messageText}}</div>
    </div>
 </div>
</template>

这是我的JS

Messages = new Mongo.Collection("messages");

if (Meteor.isClient) {
  Meteor.subscribe("messages");
  Meteor.subscribe("userStatus");

// set up the main template the the router will use to build pages

Router.configure({
  layoutTemplate: 'ApplicationLayout'
});

// specify the top level route, the page users see when they arrive at the           site
Router.route('/', function () {
  console.log("rendering root /");
  this.render("navbar", {to:"header"});
  this.render("lobby_page", {to:"main"});  
});

// specify a route that allows the current user to chat to another users
Router.route('/chat/:_id', function () {
  this.render("navbar", {to:"header"});
  this.render("chat_page", {to:"main"});  
});

///
// helper functions 
/// 
Template.available_user_list.helpers({
  users:function(){
   return Meteor.users.find();
  }
})

Template.available_user.helpers({
 getUsername:function(userId){
  user = Meteor.users.findOne({_id:userId});
  return user.profile.username;
 }, 
 isMyUser:function(userId){
  if (userId == Meteor.userId()){
    return true;
  }
  else {
    return false;
  }
 }
})



Template.chat_page.helpers({
 recentMessages: function () {
  return Messages.find({}, {sort: {createdAt: 1}});
  return Meteor.users.find();
 },
});

Template.chat_page.events({ 
 // this event fires when the user sends a message on the chat page

 'submit .new-message':function(event){  
    event.preventDefault();
    var text= event.target.text.value;

    // stop the form from triggering a page reload
    event.target.text.value = "";

   // see if we can find a chat object in the database
   // to which we'll add the message
   Meteor.call("SendMessage", text); 
  },
 });
};

Meteor.methods({
 sendMessage: function (messageText) {
  if (! Meteor.userId()) {
  throw new Meteor.Error("not-authorized");
}

Messages.insert({
  messageText: messageText,
  createdAt: new Date(),
  username: Meteor.user().username
});
}
});


// start up script that creates some users for testing
// users have the username 'user1@test.com' .. 'user8@test.com'
// and the password test123 

if (Meteor.isServer) {
  Meteor.startup(function () {
   if (!Meteor.users.findOne()){
     for (var i=1;i<9;i++){
    var email = "user"+i+"@test.com";
    var username = "user"+i;
    var avatar = "ava"+i+".png"
    console.log("creating a user with password 'test123' and username/      email: "+email);
    Meteor.users.insert({profile:{username:username, avatar:avatar}, emails:   [{address:email}],services:{ password:{"bcrypt" : "$2a$10$I3erQ084OiyILTv8ybtQ4ON6wusgPbMZ6.P33zzSDei.BbDL.Q4EO"}}});
  }
} 
},
),

Meteor.publish("messages", function () {
 return Messages.find();
});

Meteor.publish("userStatus", function() {
 return Meteor.users.find({ "status.online": true });
});
};

Answer 1

错误在于您的表单提交代码。在控制台中，您可以在第73行的Template.chat_page.events.submit .new-message中看到错误。这将使您直接找到错误代码：

'submit .new-message':function(event){  
    event.preventDefault();
    var text = event.target.text.value;
    // stop the form from triggering a page reload
    event.target.text.value = "";
}

event.target.text.value不存在。 event.target可以，但没有文字字段。有textContent，您可以访问目标的子项（在本例中为表单）。放入console.log(event);并找出您在javascript控制台中尝试访问的内容，然后使用它来确定您的代码应该是什么样子。可能适合您：

'submit .new-message':function(event){  
    event.preventDefault();
    var text = event.target.elements.chat.value;
    // stop the form from triggering a page reload
    event.target.text.value = "";
}

event.target.elements。聊天 .value来自<input>的名称字段。

如何在Meteor中路由我的信使和消息？

1 个答案: