如何在流星中傳遞我的信使和消息？

即時通訊創建一個即時通訊應用程序，即時通訊有點麻煩路由它。所以，一旦你進入應用程序。有一個可用用戶列表。你可以點擊一個用戶並開始聊天。我遇到的問題是我點擊發送後，控制檯顯示Uncaught TypeError：無法讀取未定義的屬性'值'。林不知道我在這裏做錯了什麼。此外，我需要幫助顯示上面發送的聊天消息。就好像你可以看到最近和以前的消息一樣。這是我的代碼。任何示例和幫助都會很棒。如何在流星中傳遞我的信使和消息？

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 '[email protected]' .. '[email protected]' 
// 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 }); 
}); 
};

來源

2016-01-22 Jessica

錯誤與您的表單提交代碼。在控制檯中可以看到錯誤是在Template.chat_page.events.submit .new-message上線73這將帶你到錯誤代碼：

'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。 chat .value來自<input>的名稱字段。

來源

2016-01-22 21:37:51

Brett，非常感謝！你是一個拯救生命的人。我能夠根據您提供的信息修復錯誤。 – Jessica

如何在流星中傳遞我的信使和消息？

回答

相關問題