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>

また、2 つの並べ替えオプションがあります。

//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'

別の例: 現在、最後のコメントはアクティブです (

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

）。ユーザーがカテゴリ選択で Computes をクリックすると、にリダイレクトされます。

'/?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
    });
});

更新:まあまあの解決策を見つけました。別のカテゴリについては、異なる投稿リストを持つ 2 つの div をレンダリングします。1 つは「最終投稿」、2 番目は「最終コメント」です。並べ替えセレクターは 1 つの div を非表示にし、別の div を表示します。問題は、クライアント側に転送されるデータ サイズが 2 倍になることです。少し JS が必要になることはわかっていますが、メイン カテゴリへのリンクは「#」-href がなくても明確です。並べ替えオプション - これは単なるツールであり、実際のリンクが含まれていない可能性があります。

4

2 に答える 2

1

新しいカテゴリを選択するためにページを更新しているようです。選択したカテゴリパラメータを使用して、並べ替えオプションの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 に答える