在我的Meteor应用程序中,当我单击链接时,路由器不会呈现页面
In my Meteor application, when I click a link, router does not render the page
我正在尝试构建一个多聊天室应用程序。我使用的是路由器,所以当用户点击我网站上的链接(到聊天室,用代码标记)时,它会将它们路由到一个新模板。但是,当有人单击链接时,链接URL会显示在地址栏中,但不会显示页面。但如果我直接访问链接,它就会被渲染。所以基本上我的链接并没有达到应有的效果。此外,当我点击链接时,我在控制台中收到一个错误:"部门重新计算的异常:"(下面是完整的错误代码)
这是代码,首先是html,然后是Meteor javascript。我在html和js 中评论了代码的相关部分
HTML:
<head>
<title>testChat</title>
</head>
<body>
<div class"row">
{{> room}}
{{renderPage}}
</div>
</body>
<template name="home">
<div class="span6">
<h1>Welcome to Meteor Chat</h1>
<p>Please a select a room to chat in, or create a new one</p>
</div>
</template>
<template name="room">
<table>
{{#each rooms}}
<tr>
<td><a href="/rooms/{{_id}}">{{name}}</a></td> <!-- THIS IS THE LINK! -->
<td>{{members}}</td>
<td>{{last_activity}}</td>
</tr>
{{/each}}
<tr>
<td colspan="3">
<input type="text" name="name" placeholder="Enter your chatroom name"></input>
<button type="submit" class="btn btn-primary pull-right">
<i class="icon-plus"></i> Create Room
</button>
</td>
</tr>
</table>
</template>
<template name="chatRoom">
<h1> You are in chat room {{id}} </h1>
</template>
Meteor Javascript:
Rooms = new Meteor.Collection('rooms');
if (Meteor.isServer && Rooms.find().count() == 0) {
var roomsA = [
{name: 'Meteor Talk', members: 3, last_activity: '1 minute ago', id: 0,
messages: [
{author: 'Tom', text: 'Hi there Sacha!'},
{author: 'Sacha', text: 'Hey Tom, how are you?'},
{author: 'Tom', text: 'Good thanks!'},
]},
{name: 'Meteor Development', members: 2, last_activity: '5 minutes ago', id: 1},
{name: 'Meteor Core', members: 0, last_activity: '3 days ago', id: 2}
];
for (var i = 0; i < roomsA.length; i++) {
Rooms.insert(roomsA[i]);
};
}
if (Meteor.isClient) {
Meteor.Router.add({
'/': 'home',
'add': function () { return 'test'},
'/rooms/:id': function(id) { //THIS IS THE ROUTER CALL TO THE ROOMS LINKS
Session.set('currentRoomId', id);
return 'chatRoom'
}
});
Template.room.rooms = function () {
return Rooms.find();
};
Template.chatRoom.id = function() {
var id = Session.get('currentRoomId', id);
return id;
};
console.log(Rooms.find().fetch());
}
为什么点击我的链接不会呈现请求的页面,但当我直接访问链接时,它会被呈现?
这是当我点击链接时显示的完整控制台错误:
Exception from Deps recompute: _copyAttributes@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:494
match@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:249
@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:61
visitNodes@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:17
visitNodes@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:18
visitNodes@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:18
visitNodes@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:18
visitNodes@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:18
visitNodes@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:18
_patch@http://localhost:3000/packages/spark/patch.js?e76412b922e47b6c2c1f890e3bc10fd13bdecfef:79
@http://localhost:3000/packages/spark/spark.js?4af332696fb84f1c71f2e678ad0a267755b2b828:639
operate@http://localhost:3000/packages/liverange/liverange.js?5e6bc5ba11645802c3440658c75fcc2277537dd1:458
@http://localhost:3000/packages/spark/spark.js?4af332696fb84f1c71f2e678ad0a267755b2b828:640
withEventGuard@http://localhost:3000/packages/spark/spark.js?4af332696fb84f1c71f2e678ad0a267755b2b828:103
renderToRange@http://localhost:3000/packages/spark/spark.js?4af332696fb84f1c71f2e678ad0a267755b2b828:641
@http://localhost:3000/packages/spark/spark.js?4af332696fb84f1c71f2e678ad0a267755b2b828:864
_compute@http://localhost:3000/packages/deps/deps.js?651e87591167f4286e96438ff2566ba3357bff99:129
_recompute@http://localhost:3000/packages/deps/deps.js?651e87591167f4286e96438ff2566ba3357bff99:142
flush@http://localhost:3000/packages/deps/deps.js?651e87591167f4286e96438ff2566ba3357bff99:224
[native code]
我认为,您只是在代码中输入了错误。。而不是
<div class+"row"> you wanted <div class="row">
如果你更正了这个拼写错误,你的应用程序就会正常工作。
也许有一点我认为这是使用事件处理而不是生成链接的更好方法。
Htmlhttps://gist.github.com/rudovjan/6199753
<td><a class="goToRoom" href="#">{{name}}</a></td>
javascript在这里https://gist.github.com/rudovjan/6199750
Template.room.events({
'click .goToRoom': function(e, t){
console.log("You clicked");
console.log(this);
Meteor.Router.to('/rooms/' + this.id);
}
})
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 单击F5时如何停止页面加载
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 单击jquery清除输入值
- 单击按钮以等待单击按钮
- 在单击href链接的同时下载文件
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 使图像在单击时展开到不大于浏览器
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何在单击复选框后调用控制器方法
- 单击页面上的链接后高度发生变化
- 使用jquery在单击时在单元格中输入值
- 将纯文本URL转换为可单击链接
- ASP.NET通过单击JavaScript按钮触发c#事件
- 如何在单击处理程序中使用反应路由器 1.0.x 进行客户端路由
- 单击后响应重定向到路由器 URL 并显示默认页面
- 在我的Meteor应用程序中,当我单击链接时,路由器不会呈现页面
- 单击链接两次以使用ui路由器激活状态