4

進行中のプロジェクトで新機能を開発する方向についてアドバイスを求めています。Hipmunk や Kayak のホテル検索結果のように機能する新しい検索を作成するように依頼されました。データを小さなブロックで読み込みます。たとえば、1 回の呼び出しで 10 軒のホテルを読み込み、データが入ってくるたびに並べ替えます。

このサイトは Laravel 4 で書かれており、古い検索では、無限スクロールによるページネーションによる基本的な検索が使用されていました。AngularJS のような JavaScript フレームワークでこの機能を構築する方が簡単だという人もいましたが、このサイトは既に構築されていますが、利点があれば書き直すことを検討します。

現在、プロジェクトはデータ用の API を提供するバックエンド チームでセットアップされています。当初は AngularJS を検討していましたが、データを有効にするには通常、データを編集する必要があります。もう 1 つのオプションは、現在の Laravel サイトを使用して、それを javascript フレームワークに対応した中間 API に変えることです。

これについてどの方向に進むべきか、私にはよくわかりません。それを処理して現在のサイトを維持する独自のカスタム jquery プラグインを作成するか、AngularJS を使用します。アドバイスをいただければ幸いです

非常に役立つ可能性のある便利なプラグインを見つけました: http://mixitup.io/

以下は Hipmunk 検索の例です。異なるホテルがあることがわかります。これらのスクリーンショットを次々と撮りました。このような検索システムを再作成しようとしています。

ここに画像の説明を入力

[アップデート]

さまざまなオプションについてさらに調査を行った後、Observable Array を使用してすべてを追跡することは良い考えであることがわかりました。underscore.js で使用する小さなライブラリを見つけました。

https://github.com/mennovaslooten/Observable-Arrays

これは、これまでに大量に作成した配列の更新とフィルタリングを処理する場合にすぎません。

4

3 に答える 3

0

はい、いくつかのフレームワークはこの種の機能を作成するのに役立ちましたが、必ずしもそれらのフレームワークに精通しているわけではないため、自分でコーディングする方が簡単/高速です。

これを実装する方法についてのアドバイスを次に示します。

バックエンド

Laravelで、次の場所に API ルートを作成しapp/routes.phpます。

Route::get('api/hotels/{ordering}/page/{page}', 'ApiController@order');
//todo Validate data with regular expression

コントローラーを作成しますapp/controllers/ApiController.php:

class ApiController extends BaseController {

    public function getOrder($ordering, $page){

       $query = Hotel::select('*');

        switch($ordering){
            case "price":

                $query->orderBy('price', 'ASC');

            break;
            case "review":
                //...
            break; 
            default:
                //...
            break;
        }

        $query->take(10);

        //...paging

        $hotels = $query->get();

        return Response::json($hotels);
    }
}

フロントエンド

HTML で、さまざまな順序付けアクションを使用してボタンを作成します。

Filter by:
<div class="btn" data-action="price">Price</button>
<div class="btn" data-action="review">Reviews</button>

Hotels:
<ul id="hotels"></ul>

Javascript では、ボタンがクリックされると、Laravel API を呼び出してデータをフェッチします。

$('.btn').click(function() {

    var ordering = $(this).data('action');

    $.ajax({
        type: "get",
        url: "api/hotels/"+ordering+"/page/"+currentPage,            
        dataType: "json",
        success: function(result){         

            var $list = $('#hotels');

            $.each(result.hotels, function(idx, hotel) {

                $list.append('Hotel: '+hotel.name);
                //...
            });
        },
        error: function(xhr, desc, exceptionobj) {
            alert(xhr.responseText);
        }
    });
});

お役に立てば幸いです。

于 2013-11-02T16:33:19.147 に答える