通過西納特拉控制器

我執行的實時搜索功能加載HAML視圖插入Ajax請求佈局到我的網頁。我有以下簡化西納特拉控制器通過西納特拉控制器

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

然後我有一個佈局。與輸入字段

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

和的兩個div HAML文件

#content 
    = yield 

#results(style="display=none")

現在開始我的問題我甲腎上腺素編輯jquery/javascript函數發送xhr或json請求，使用sinatra控制器中的輸入生成search_item視圖，然後應該在佈局#results div中呈現/加載search_item視圖，而不刷新整個頁面。現在我有這樣的事情：

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

我試過，但它不工作..

我不使用導軌！所以我有三個問題：

如何正確發送請求上KEYUP到西納特拉，我如何使用它呢？
我該如何不刷新將search_item.haml渲染到layout.haml #results div中。
有沒有更好的方法來做到這一點？

非常感謝您的幫助！

來源

2012-11-24 reencode

我該如何正確地將請求發送到sinatra，我該如何在那裏使用它？

你需要指定你的$.get()

的數據類型爲html我怎麼那麼不爽快渲染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)。

有沒有更好的方法來做到這一點？

我會推薦檢查backbone.js，這是一種用於管理單個頁面UI的javascript框架。

一旦你掌握了它，我建議檢查backbone.marionette.js。最終你只需要用骨幹來重新發明輪子，所以一旦你瞭解了骨幹網如何工作，這將使它真正發揮作用。

最後但並非最不重要，coffeescript。它更具可讀性！

這三件事情需要一些時間才能理解，但它是值得的！

來源

2012-11-24 13:00:13 rudolph9

感謝您的回答:)！我如何在$ .get（）中指定html，以及如何將haml視圖呈現給sinatra控制器中的html。您看到我收到一個HTTP/1.1 500內部服務器錯誤，作爲對我的xhr請求的響應。那可能是什麼？ – reencode

您將其指定爲第三個參數，請參閱[jquery doc]（http://api.jquery.com/jQuery.get/），基本上只是告訴javascript如何處理傳入數據。當您向''/ search_item /'+ q'發出請求時，'HTTP/1.1 500內部服務器錯誤'在您的服務器端出現問題，我注意到您沒有使用'：for'或者您要傳遞的內容你的javascript中的'q' var。當您向該地址發出請求時，_sinatra_錯誤日誌會說什麼？ – rudolph9

該死的..我應該看看sinatra日誌。它顯示haml文件由於未初始化的變量而無法正確編譯。非常感謝您的幫助。問題解決了。 – reencode

通過西納特拉控制器

回答

相關問題