在rails中使用jquery mobile和json

我有一個簡單的rails應用程序顯示項目列表，我想用jquery mobile創建一個原生移動應用程序，並且這些項目將從主站點處理。我的控制器是在rails中使用jquery mobile和json

class ListsController < ApplicationController 

    respond_to :json 

    def index 
    @lists = List.all 
    respond_with(@lists) 
    end 

    # ... 
end

然後在我的本地移動應用我在index.html頁面有這個

$.ajax({ 
    url: "http://localhost:3000/lists", 
    dataType: "json", 
    type: "GET", 
    processData: false, 
    contentType: "application/json" 
});

這個數據是牽強，我想它在jQuery Mobile的模板被附加里面的標籤。我如何使用jQuery來做到這一點。謝謝

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 

<body> 
<div data-role="page"> 
    <div data-role="header"> 
      <h1>Simple test app</h1> 
     </div> 
    <div data-role="content"> 
     <ul> 
      <li>(content appends here)</li> 
     </ul> 
     </div> 
    <div data-role="footer"> 
      <h4>test app</h4> 
     </div> 
</div> 
</body> 
</html>

的JSON輸出例子如下

json output

來源

2012-01-12 Uchenna

什麼你的JSON輸出是低的嗎？好嗎？你能舉一個例子嗎？ – Jasper 2012-01-12 21:22:48

只是使用它 – Uchenna 2012-01-12 21:29:46

我更新了我的答案以反映您的JSON輸出。 'serverResponse [0] .list.title'會輸出第一個標題，'serverResponse [1] .list.title'會輸出第二個標題。我的例子展示瞭如何迭代所有返回的對象。 – Jasper 2012-01-12 21:32:28

在你的AJAX調用，你可以設置一個success回調函數，可以在其中添加服務器針對DOM：

$.ajax({ 
    url   : "http://localhost:3000/lists", 
    dataType : "json", 
    type  : "GET", 
    processData : false, 
    contentType : "application/json", 
    success  : function (serverResponse) { 

     //setup an output variable to buffer the output 
     var output = []; 

     //since you aren't telling the `.ajax()` function to parse your response you need to do it here so the string returned from the server is an object 
     serverResponse = $.parseJSON(serverResponse); 

     //iterate through the results, assuming the JSON returned is an array of objects 
     for (var i = 0, len = serverResponse.length; i < len; i++) { 
      output[output.length] = '<a href="#' + serverResponse[i].list.id + '">' + serverResponse[i].list.title + '</a><br />'; 
     } 

     //now append all the output at once (this saves us CPU cycles over appending each item separately) 
     $('[data-role="content]').children('ul').children('li').eq(0).html(output.join('')); 
    } 
});

您應該添加一個ID或類到HTML標記中的某個元素，這樣你只能找到你想要的LI。如果你給你的data-role="page"一個ID，你可以針對你想要的LI：

$（'＃page-id'）。children（'[data-role =「page」]'）。children（'ul 。 '）。兒童（' 禮「）當量（0）;

.eq(0)是在那裏只有在UL元素有多個LIs。

下面是一些輕閱讀雅關於上述代碼：

$.parseJSON()：http://api.jquery.com/jquery.parsejson/
.join()：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/join
.eq()：http://api.jquery.com/eq
快速循環：http://jsperf.com/jquery-each-vs-for-loops/2

來源

2012-01-12 21:21:55 Jasper

只是更新了問題 – Uchenna 2012-01-12 21:30:25

不客氣。 – Jasper 2012-01-12 21:46:22

首先，你需要給AJAX回調：

$.ajax({ 
    url: "http://localhost:3000/lists", 
    dataType: "json", 
    type: "GET", 
    processData: false, 
    contentType: "application/json", 
    success: function(transport){ 
    insertMyStuff(transport); 
    } 
});

我喜歡動回調邏輯出來的ajax區塊：

insertMyStuff = function(transport){ 
    $("#my_li_id").append(transport); 
    //or iterate over your json however you like here 
}

你需要給<li>一個id，讓jquery用這種方法找到它。這裏有一個簡單的方法：

<li id="my_li_id">(content appends here)</li>

來源

2012-01-12 21:21:32

任何理由使兩個功能，而不是一個？你不能直接將'insertMyStuff'代碼直接放入'success'回調函數中嗎？此外，如果返回JSON，您不會希望將其附加到DOM，您將需要遍歷JSON對象，只需將所需的信息添加到DOM。 – Jasper 2012-01-12 21:24:24

這裏就夠了。我只是習慣於將回調邏輯轉移到另一個函數，以保持我的ajax塊更簡潔... – 2012-01-12 21:26:01

非常好。會去槽 – Uchenna 2012-01-12 21:47:02

在rails中使用jquery mobile和json

回答

相關問題