jquery mobileとjson in Railsを使用する

シンプルなレールアプリがあり、jquery mobileを使ってネイティブモバイルアプリを作成したいと思っています。私のコントローラはjquery mobileとjson in Railsを使用する

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のモバイルテンプレートに追加されたいですliのタブの内側にあります。どのようにjqueryを使用してこれを行うことができます。

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

私は外のコールバック・ロジックを動かすのが好き：

<!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

ちょうどそれをuopated – Uchenna

あなたのJSON出力を反映するために私の答えを更新しました。 'serverResponse [0] .list.title'は最初のタイトルを出力し、' serverResponse [1] .list.title'は2番目のタイトルを出力します。私の例は、返されたすべてのオブジェクトを反復処理する方法を示しています。 – Jasper

あなたがDOMに、サーバーの応答を追加することが可能なsuccessコールバック関数を設定することができます呼び出します：ここでは簡単な方法である

$.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を指定した場合は、をターゲットにすることができます。

$（ '＃page-id'）。children（ '[data-role = "page"]'）。children（ 'ul '）.children（' li '）。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
高速ループ：ここ
は、上記のコードについてyaのためのいくつかの光読書であるhttp://jsperf.com/jquery-each-vs-for-loops/2

出典

2012-01-12 21:21:55 Jasper

はちょうど質問を更新しました – Uchenna

あなたは大歓迎です。 – Jasper

以下の最初のですありがとう、あなたは、Ajaxにコールバックを与える必要がありますアヤックスブロック：

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

<li>にjqueryのIDを付ける必要があります。あなたのAJAXで

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

出典

2012-01-12 21:21:32

1つではなく2つの機能を作る理由は何ですか？ 'success'コールバック関数に' insertMyStuff'コードを直接入れることはできませんか？また、JSONが戻された場合は、単にDOMに追加するだけでなく、JSONオブジェクトを反復して、必要な情報をDOMに追加することもできます。 – Jasper

ここで十分です。私はちょうど私のajaxブロックをより簡潔に保つために別の関数にコールバックロジックを移動する習慣になっています... –

非常に良い。それは谷を行くだろう – Uchenna

jquery mobileとjson in Railsを使用する

答えて

関連する問題