2

私は自分のページにlive-search-functionを実装しています。次の簡略化されたsinatraコントローラーがあります。

get '/search_item/:for' do
//do some search stuff
haml :search_item,:layout => (request.xhr? ? false : :layout),
                  :locals => {  :found_items => queried_items,
                                :current_user => current_user,
                                } 
end

次に、入力フィールドを含むlayout.hamlファイルがあります

%input(type="text" id="search_query" name="search_query"  size="15" value="")

と2つのdiv

#content
    = yield

#results(style="display=none")

xhrまたはjsonリクエストを送信するためにjquery/javascript関数が必要です。sinatraコントローラーの入力を使用してsearch_itemビューを生成し、ページ全体を更新せずにレイアウト#resultsdivでレンダリング/ロードする必要があります。 。今では私は次のようなものを持っています：

:javascript
 $(function() {
 $("#search_query").keyup(function(){
    var q = $("#search_query").val();
    if(q != ""){
----------- this is the problem part -------------
    $.get('/search_item/'+q, function(data) {
    $('#results').html(data);})
--------------------------------------------------
    $("#content").css("display","none");
    $("#results").css("display","inline");

    }
    else{
    $("#content").css("display","inline");
    $("#results").css("display","none");
    }}); });

ルーティングされたhamlビューをdivにロードするだけの方法はありますか？

    var url = "/search_item/"+q;
    $('#results').load(url);

私はそれを試しましたが、うまくいきませんでした。

レールは使用していません！だから私は3つの質問があります：

  1. キーアップのリクエストをsinatraに適切に送信するにはどうすればよいですか？また、そこでどのように使用できますか？
  2. 次に、更新せずにsearch_item.hamlをlayout.haml#resultsdivにレンダリングするにはどうすればよいですか。
  3. それを行うためのよりエレガントな方法はありますか？

よろしくお願いします！

4

1 に答える 1

0

キーアップのリクエストをsinatraに適切に送信するにはどうすればよいですか？また、そこでどのように使用できますか？

データ型をhtmlとして指定する必要があります$.get()

次に、更新せずにsearch_item.hamlをlayout.haml#resultsdivにレンダリングするにはどうすればよいですか。

まず、hamlビューをhtmlにコンパイルする必要があります（ブラウザーはhamlをサポートしていませんが、hamlは既に実行しているhtml / erbテンプレートにコンパイルします！）。次に、最善のアプローチは、、$('some_selector').append( data_recieved_from_get_call)またはを使用する可能性があります$('some_selector').html( data_recieved_from_get_call)。

それを行うためのよりエレガントな方法はありますか？

私はbackbone.jsをチェックすることをお勧めします。これは、単一ページのUIを管理するための一種のjavascriptフレームワークです。

理解できたら、backbone.marionette.jsをチェックすることをお勧めします。バックボーンだけでホイールを何度も再発明することになります。バックボーンがどのように機能するかを理解すれば、これにより生産性が大幅に向上します。

最後になりましたが、coffeescript。とても読みやすくなっています！

これらの3つのことを理解するには時間がかかりますが、それだけの価値はあります。

于 2012-11-24T13:00:13.337 に答える