Не удается добавить элемент списка в представление списка в jQuery mobile - PullRequest
Новая
       26

Не удается добавить элемент списка в представление списка в jQuery mobile

1 голос
/ 16 сентября 2011

Что не так с моим JavaScript?Я следовал здесь за вопросами и ответами при добавлении данных в мобильные списки просмотра jQuery, но это, похоже, не работает. 

<!-- start view_skus -->
<div data-role="page" id="view_skus">
   <div data-role="header" data-position="fixed">
      <a data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
      <h1>View SKUs</h1>
      <ul data-role="listview" id="sku_list" data-inset="true"></ul>
      <script type="text/javascript">
         var xhr = new XMLHttpRequest();
         xhr.open("GET", "http://matkiros.cloudant.com/sm/_design/view_skus/_view/view_skus");
         xhr.onload = function() {
            var response = jQuery.parseJSON(xhr.responseText);
            for (var i = 0; i < response.total_rows; i++) {
               $('#sku_list').append($("<li></li>").html('<h3>' +
                     rows[i].value.description + '</h3><br/>' +
                     'ID: ' + rows[i].value.sku_id + '<br/>' +
                     'Quantity: ' + rows[i].value.quantity))
                  .listview('refresh');
            }
         };
         xhr.send();
      </script>
   </div>
</div> <!-- end view_skus -->

По сути, SKU - это просто продукт в продуктовом магазине, и я хочу показатьподробности в виде списка.Я получаю список SKU из базы данных CouchDB с URL http://matkiros.cloudant.com/sm/_design/view_skus/_view/view_skus, который возвращает следующую строку JSON: 

{"total_rows":3,"offset":0,"rows":[
{"id":"96ba7296fb95fb14e54a2ae9777dee06","key":"00001","value":{"_id":"96ba7296fb95fb14e54a2ae9777dee06","_rev":"1-029baa64356c5187610d9867c590921b","type":"sku","sku_id":"00001","description":"Dried mangoes","quantity":100}},
{"id":"7e1ec756e85f0e073ed98f3e8a59ebb8","key":"53911","value":{"_id":"7e1ec756e85f0e073ed98f3e8a59ebb8","_rev":"1-5e02bd021232b3bc3bd56dd00d50b64d","type":"sku","sku_id":"53911","description":"Samsung Galaxy S II","quantity":35}},
{"id":"e5b24f49ac538e5187e382a341ac043c","key":"A91J7","value":{"_id":"e5b24f49ac538e5187e382a341ac043c","_rev":"3-f3bab0f8936023c4133f47b29e78c575","type":"sku","sku_id":"A91J7","description":"Jansport bag J2203-1","quantity":50}}
]}

Ответы [ 2 ]

0 голосов
/ 22 сентября 2011

Я понял, что мой код выше был прав, за исключением того, что вместо того, чтобы сказать rows[i].value.some_property, это должно было быть response.rows[i].value.some_property.

0 голосов
/ 16 сентября 2011

Пожалуйста, проверьте с JQM Beta 3

Вместо этого 

for (var i = 0; i < response.total_rows; i++) {
    $('#sku_list').append($("<li></li>").html('<h3>' +
        rows[i].value.description + '</h3><br/>' +
        'ID: ' + rows[i].value.sku_id + '<br/>' +
        'Quantity: ' + rows[i].value.quantity))
    .listview('refresh');
}

Попробуйте это 

for (var i = 0; i < response.total_rows; i++) {
    $('#sku_list').append($("<li></li>").html('<h3>' +
        rows[i].value.description + '</h3><br/>' +
        'ID: ' + rows[i].value.sku_id + '<br/>' +
        'Quantity: ' + rows[i].value.quantity));
}

// Make the refresh after the for loop
$('#sku_list').listview('refresh');

// This might be another way but refreshes the whole page
// $('#view_skus').trigger('create');
...