0

我正在尝试为我博客中的帖子创建一个简单的排序选项。问题是我想要使用的最后一件事是基于 JS 的重定向，因为事实上有些用户没有在他们的浏览器中启用 JS，这就是为什么他们无法对我博客中的帖子进行排序。让我给你举个例子：

我的博客中有几个类别：

//categories selection
<ul>
    <li class="active"><a id="cat1" href="/?category=music">Music</a></li>
    <li><a id="cat2" href="/?category=photo">Photo</a></li>
    <li><a id="cat3" href="/?category=cinema">Cinema</a></li>
    <li><a id="cat4" href="/?category=computers">Computes</a></li>
</ul>

另外，我有两个排序选项：

//sorting options
<div>
    <a class="active">Last posts</a>
    <a>Last comments</a>
</div>

根据当前的活动元素，用户会被重定向到带有此类参数的页面，例如'/?category=music&sort=posted' 或'/?category=personal&sort=commented'。

例如，让我们在类别选择中选择“CINEMA”选项卡此时处于活动状态（

<li class="actvie"><a id="cat3" href="/?category=cinema">Cinema</a></li>

）。因此，如果用户单击最后评论链接，它应该重定向到

'/?category=cinema&sort=comments'

另一个例子：当前 Last comments 处于活动状态 (

<a class="active">Last comments</a>

）。用户点击类别选择中的计算，它应该重定向到

'/?category=computers&sort=comments'.

那么，是否有任何变体可以在没有 JS 的情况下执行此类功能？如果没有，您能否建议我最优雅的解决方案，除了手动运行类别中的每个元素并使用 JS/jQuery 对选项和生成链接进行排序？

提前致谢！

服务器端：

db.collection("posts", function (err, collection) {
    //getting posts dependinc on requested category
    collection.find({category: req.query['category']}, {sort: [['time_added', -1]], limit:20}, function (err, posts) {
        //getting posts and rendering page
    });
});

更新：我找到了一个马马虎虎的解决方案。对于一个单独的类别，我使用不同的帖子列表呈现两个 div。一个用于“最后发布”，第二个 - 用于“最后评论”。排序选择器只会隐藏一个 div 并显示另一个。问题只是传输到客户端的数据大小的两倍。我知道，它需要一点 JS，但是没有'#'-hrefs 的主要类别链接会很清楚。和排序选项 - 它只是一个工具，它可能没有真正的链接。

4

2 回答 2

1

似乎您正在刷新页面以选择新类别。使用 selected category 参数来确定排序选项的 URL。需要更多来自服务器端的代码来给你一个更具体的例子。

如果您不想使用 Javascript，则必须<a class="active">Last posts</a>根据选择的类别动态生成排序链接的 href 属性。您今天如何渲染页面？只是静态文件？看看像 mustache.js 这样的模板引擎，然后你可以这样做：

<a class="active" href="/?category={{category}}&sort=comments">Last posts</a>

查看本教程，了解使用 mustache.js http://mrjaba.posterous.com/a-gentle-introduction-to-nodejs的 Node.js 示例

在您发表评论后编辑：或使用 EJS 的类似内容

<div>
    <a href="/?category=<%=category%>&sort=posts" class="active">Last posts</a>
    <a href="/?category=<%=category%>&sort=comments">Last comments</a>
</div>
于 2012-07-29T11:54:20.797 回答
0

您是在谈论在客户端还是服务器端进行实际排序？如果是后者，没有问题；只需坚持您拥有的 URL，让服务器重写它们并重定向到新的 URL（如果您甚至必须这样做；您可以将“较短”的 URL 视为已排序内容的实际 URL）。这绝不是依赖于可用的客户端脚本。

当然，您可以在此之上实现客户端排序，以便为确实有客户端脚本可用的用户提供方便；这里的关键是使用不显眼的 JavaScript（例如在加载时安装处理程序以拦截对排序链接的点击）。

于 2012-07-29T22:57:15.147 回答