通过 Sinatra 控制器将 Haml 视图加载到 Ajax 请求的布局中

Question

我正在我的页面中实现实时搜索功能。我有以下简化的 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. 有更优雅的方法吗？

非常感谢您的帮助！

Answer 1

如何正确地将 keyup 请求发送到 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。它更具可读性！

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