Использование jquery mobile и json in Rails

У меня есть простая утилита 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. Спасибо выход пример

<!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 lo хорошо? Можете ли вы опубликовать пример? – Jasper

только что отозвал его – Uchenna

Я обновил свой ответ, чтобы отразить ваш выход JSON. 'serverResponse [0] .list.title' выведет первый заголовок, а' serverResponse [1] .list.title' выведет второе. В моем примере показано, как выполнять итерацию по всем возвращаемым объектам. – Jasper

В вашем 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('')); 
    } 
});

Вы должны добавить идентификатор или класс для некоторого элемента в вашей разметке HTML, чтобы вы могли найти только тот, который вы хотите. Если вы дадите свой data-role="page" ID, вы можете установить таргетинг на LI:

$ ('# page-id'). Children ('[data-role = "page"]'). Children ('ul . ') .children (' ') экв Li (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
Fast Loops: http://jsperf.com/jquery-each-vs-for-loops/2

источник

2012-01-12 21:21:55 Jasper

только что обновил вопрос – Uchenna

Добро пожаловать. – Jasper

Во-первых, вы должны дать Аякса обратного вызова:

$.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> идентификатор jQuery, чтобы найти его с помощью этого подхода. Вот простой способ:

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

источник

2012-01-12 21:21:32

Любая причина для выполнения двух функций вместо одного? Не можете ли вы просто вставить код 'insertMyStuff' непосредственно в функцию обратного вызова' success'?Также, если JSON будет возвращен, вы не захотите просто добавить его в DOM, вы хотите, чтобы итерация через объект JSON добавляла только нужную информацию в DOM. – Jasper

Здесь было бы достаточно. Я просто привык к переходу логики обратного вызова к другой функции, чтобы мои блоки ajax были более краткими ... –

очень приятно. пойдет через него – Uchenna

Использование jquery mobile и json in Rails

ответ

Смежные вопросы