Использование jquery mobile и json в Rails - PullRequest
Новая
       0

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

1 голос
/ 13 января 2012

У меня есть простое приложение rails, которое отображает список элементов, и я хочу создать собственное мобильное приложение, используя jquery mobile, и элементы будут отслеживаться с основного сайта.мой контроллер 

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

Ответы [ 2 ]

0 голосов
/ 13 января 2012

В вашем вызове 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-разметка, чтобы вы могли найти только тот LI, который вы хотите.Если вы дадите своему data-role="page" идентификатору, вы можете указать желаемый LI с помощью этого:

$ ('# page-id'). Children ('[data-role = "page"]') .children ('ul'). children ('li'). eq (0);

.eq(0) есть на всякий случай, если в элементе UL есть несколько LIs.

Вот несколько легких подсказок для вас о приведенном выше коде:

0 голосов
/ 13 января 2012

Во-первых, вам нужно дать 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> идентификатор для jquery, чтобы найти его с таким подходом.Вот простой способ: 

<li id="my_li_id">(content appends here)</li>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...