Загрузите представление haml в макет по запросу Ajax через контроллер Sinatra

Question

Я внедряю функцию live-search на мою страницу. У меня есть следующий упрощенный контроллер 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="")

и два дива

#content
    = yield

#results(style="display=none")

Теперь начинается моя проблема. Мне нужна функция jquery/javascript для отправки запроса xhr или json, используйте входные данные в контроллере sinatra для генерации представления search_item, которое затем должно быть отображено / загружено в макет #results div без обновления всей страницы., К настоящему времени у меня есть что-то вроде:

: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);

Я пытался, но это не работает..

Я не использую рельсы! Итак, у меня есть три вопроса:

1. Как правильно отправить запрос на keyup в sinatra и как я могу использовать его там?
2. Как мне тогда без обновления отрендерить search_item.haml в layout.haml #results div.
3. Есть ли более элегантный способ сделать это?

Заранее большое спасибо за вашу помощь!

Answer 1

Как правильно отправить запрос на keyup в sinatra и как я могу использовать его там?

Вам нужно указать тип данных как HTML в вашем $.get()

Как мне тогда без обновления отрендерить search_item.haml в layout.haml #results div

Сначала вам нужно скомпилировать ваше представление haml в html (браузеры не поддерживают haml, но haml компилируется в шаблоны html/erb, которые вы уже делаете!), А затем ваш лучший подход, вероятно, будет использовать $('some_selector').append( data_recieved_from_get_call), или же $('some_selector').html( data_recieved_from_get_call),

Есть ли более элегантный способ сделать это?

Я бы порекомендовал проверить http://backbonejs.org/, это своего рода javascript-фреймворк для управления одностраничным пользовательским интерфейсом.

Как только вы получите справку, я бы порекомендовал проверить backbone.marionette.js. В итоге вы много раз изобретаете колесо, используя только магистраль, поэтому, как только вы поймете, как работает магистраль, это действительно позволит работать продуктивно.

И последнее, но не менее важное. Это намного удобнее для чтения!

Эти три вещи займут некоторое время, чтобы понять, но это того стоит!!