我最近刚刚发现了 slack.com，我爱上了他们处理界面的方式。如果您以前从未使用过它，这很容易：
右侧有一个侧导航栏和一个主容器。每次单击侧导航栏中的项目时，它的内容都会加载到容器中。焦点项目发生变化，容器的内容发生变化，但页面不会重新加载。
如果数据同时发生变化，它会神奇地更新。
实现这样的目标需要什么？
这几天一直在看meteorjs，但是从来没有提到url部分。
【问题讨论】：
标签： javascript html css node.js meteor
最重要的是，如果你使用像 angular 这样的框架，你会注意到这样的 url：
您可能已经在 wikipedia 中看到过类似这样的网址：
那个小# 不会在url 上重新加载页面，因此您可以使用它来进行url 路由操作而无需更改页面。您可以使用window.location.hash 访问它。所以在维基百科文章中，你会得到
> window.location.hash
#Cats_and_humans
将它与 ajax 和事件侦听器结合起来，您可以做类似的事情。
// using jquery
// set a callback when the hash changes
$(window).on('hashchange', function (e) {
e.preventDefault();
var hash = window.location.hash;
// get your container where you want to add data and clear it out
var $container = $('#container');
$container.html('<ul></ul>');
if (hash === '#/movies') {
// request json from an endpoint, and with the data, append it to the dom
$.getJSON('/api/movies', function (data) {
data.each(function (el) {
$container.append('<li>' + el.name + '</li>');
});
});
}
});
【讨论】：
对于“网址更改功能但不重新加载”，我认为@Kavan Pancholi 回答了您的问题。另一种实现方式是使用 Iron-router 的产量模板功能。
您正在使用流星，这意味着您可以轻松地做到这一点（忘记 Ajax 和 Sockets）。
我不知道 Slack（但我肯定会看看），但据我了解，所有数据都是预加载/延迟加载的，它们只会更改显示的元素。换句话说，您准备好并加载所有客户订阅，或者在加载收益模板时将它们打开。
如果我意识到我没有正确理解您的目标，我会查看 Slack 并对其进行编辑。
编辑好的，我试过了。您需要将 yield 模板与 Iron-router 一起使用，它们还添加了一些您可以使用 _uihooks + 加载模板实现的过渡效果
【讨论】：
是的。松弛很棒。我们（我的团队）每天都在使用它。我经常使用它，在某些时候我不检查电子邮件但我检查松弛。
所以，看你的问题。
可以通过javascript轻松完成[Tl;dr]
代码：
window.history.pushState("object or string", "Title", "/new-url");
这可以通过两种方式完成， 一世。通过 Ajax 和 Javascript ii.通过套接字
我。通过 Ajax 和 Javascript： 在 javascript 中，您可以使 setTimeout 函数在一段时间内触发 ajax 请求。通过 Ajax，它将从后端获取最新消息并显示出来。
二。通过套接字： 在套接字中，如果您使用 node.js，则有一个非常流行的库，名为 socket.io，它将实时获取和更新消息。
祝你好运！
【讨论】：
您需要 Ajax。您可以将它与脚本结合使用，可能是 PHP 在计时器间隔（“心跳”）内检查数据库的状态，如果有任何更改，则加载新数据。我建议使用一个特定的日期时间戳列进行比较，以尽可能减少数据库上的负载，因为同时在页面上的很多用户会发出很多请求。
【讨论】：