2

我正在我的页面中实现实时搜索功能。我有以下简化的 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="")

和两个 div

#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. 有没有更优雅的方法来做到这一点？

非常感谢您的帮助！

4

1 回答 1

0

如何正确地将 keyup 请求发送到 sinatra 以及如何在那里使用它？

您需要在您的$.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).

有没有更优雅的方法来做到这一点？

我建议检查一下主干.js，它是一种用于管理单页 UI 的 javascript 框架。

一旦你掌握了它，我建议你检查一下backbone.marionette.js。你最终只能用主干重新发明轮子，所以一旦你了解主干是如何工作的，这将真正有助于提高工作效率。

最后但同样重要的是，coffeescript。它更具可读性！

这三件事需要一些时间才能理解，但这是值得的！！

于 2012-11-24T13:00:13.337 回答