jquery - 通过 Sinatra Controller 根据 Ajax 请求将 haml View 加载到布局中

Question

我正在我的页面中实现实时搜索功能。我有以下简化的 sinatra Controller

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 Controller 中的输入生成 search_item View ，然后应在布局 #results div 中渲染/加载该 View ，而无需刷新整个页面。现在我已经有了类似的东西:

: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 View 加载到 div 中

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

我尝试过，但它不起作用..

我没有使用rails! 所以我有三个问题:

1. 如何正确地将 keyup 请求发送到 sinatra 以及如何在那里使用它？
2. 如何在不刷新的情况下将 search_item.haml 渲染到layout.haml #results div 中。
3. 有更优雅的方法吗？

预先非常感谢您的帮助!

Answer 1

How do I properly send the request on keyup to sinatra and how can i use it there?

您需要在$.get()中将数据类型指定为html

How do I then without refreshing render the search_item.haml into the layout.haml #results div

首先，您需要将 haml View 编译为 html(浏览器不支持 haml，但 haml 编译为您已经在做的 html/erb 模板!)，然后您最好的方法可能是使用 $('some_selector').append( data_recieved_from_get_call) 或 $('some_selector').html( data_recieved_from_get_call)。

Is there a more elegant way to do it?

我建议查看backbone.js ，它是一种用于管理单个页面 UI 的 javascript 框架。

一旦你掌握了它，我建议你查看 backbone.marionette.js 。您最终会仅用主干来重新发明轮子，因此一旦您了解了主干的工作原理，这将真正能够提高工作效率。

最后但并非最不重要的一点是，coffeescript 。它更具可读性!

这三件事需要一些时间来理解，但这是值得的!!