складной набор в phonegap с использованием jquery не будет работать должным образом

Я пытаюсь создать складной набор в phonegap. Он извлекает данные RSS-канала для создания списка. Я хочу, чтобы список был складным набором.

Однако, когда я настроил его так, как должен быть обычный складной набор, он больше не импортирует списки, и я получаю пустой экран для содержимого.

Мне удалось заставить его немного поработать, но у меня есть складной набор внутри списка, который мне не нужен. Однако избавление от списка и замена всего этого на то, как WC3 показывает, как создать складной набор, облажается и не будет тянуть каналы.

Любые идеи о том, как заставить это работать правильно?

Я хочу, чтобы мой список выглядел так: первый пример здесь: http://demos.jquerymobile.com/1.2.0/docs/content/content-collapsible-set.html

но когда я настроил его так: он появляется пустым.

<script type="text/javascript">
			function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';
            $.each(postlist, function(idx, data) {
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '</a>';
            });
            html += '</div>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist div[data-role=collapsible]").collapsible();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>
<div role="main" class="ui-content">
			<div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
	</div><!-- /content -->

поэтому я попытался:

<script type="text/javascript">
			function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<ul data-role="listview" data-inset="true" data-theme="a">';
            $.each(postlist, function(idx, data) {
            html += '<li>';
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry"><h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p></div>';
            html += '</a>';
            html += '</li>';
            });
            html += '</ul>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist ul[data-role=listview]").listview();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>
<div role="main" class="ui-content">
			<div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
	</div><!-- /content -->

что приводит к сворачиванию внутри коллапса, то есть к вложенному коллапсу, который мне не нужен. Вот результат: он выглядит примерно так: http://i.stack.imgur.com/8OsAU.jpg

как мне получить вид, который я хочу?

Заранее спасибо,


person kami nelson    schedule 28.05.2015    source источник


Ответы (1)


Ваш код создает только один складной элемент со всеми добавленными в него статьями, потому что вы поместили эту строку за пределы $.each(). Кроме того, вы не можете окружить все складное якорем, потому что якорь складного заголовка переключает складное открывание и закрывание. Вместо этого вы можете либо окружить контент, либо добавить кнопку/лимк внутри контента:

function initializeLifeHacker() {
    url = 'http://feeds.gawker.com/lifehacker/full';
    var feed = new google.feeds.Feed(url);
    feed.setNumEntries(25);
    feed.load(function (result) {
        var postlist = result.feed.entries;
        var html = '';
        $.each(postlist, function (idx, data) {
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';           
            html += '<h2>' + data.title + '</h2>';
            html += '<p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '<a href="#" class="ui-btn" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">Open Article...</a>';
            html += '</div>';
        });

        $("#lifeHackerFeedlist").append(html).find("div[data-role=collapsible]").collapsible();
    });
}

Работает DEMO

person ezanker    schedule 28.05.2015
comment
Здорово! Спасибо. Вау, не могу поверить, что я этого не понял! слишком много часов кодирования, я думаю. Почему поле вставки div или кнопка в крахе не улавливают мои закругленные углы из моей мобильной темы jquery? Я добавил data-theme=a в Div - person kami nelson; 28.05.2015
comment
@kaminelson, для jQM 1.4.x попробуйте: $(#lifeHackerFeedlist).append(html).collapsibleset(refresh).enhanceWithin(); (обновленная скрипта: jsfiddle.net/ezanker/emdypzqy/1), если вы используете ранее jQM, попробуйте триггер (создать) вместо повышения внутри (). - person ezanker; 29.05.2015
comment
Это сработало! Спасибо! Еще один, надеюсь, последний вопрос: как я могу узнать, какие данные извлекаются из каналов? Я хочу использовать описание вместо content.snippet, но описание для этого фида не определено, поэтому я хочу увидеть метки XML, чтобы выбрать правильный. - person kami nelson; 29.05.2015
comment
@kaminelson, добавь console.log(postlist); и посмотрите в Chrome JavaScript Console. Канал JSON имеет автора, категории, контент, contentSnippet, ссылку, дату публикации, заголовок. Я не вижу включенного поля типа описания... - person ezanker; 29.05.2015
comment
@kaminelson, согласно документации по API Google Feed, контент соответствует описанию, поэтому вы можете использовать data.content вместо data.contentSnippet. developers.google.com/feed/v1/devguide#resultJson - person ezanker; 29.05.2015
comment
@kaminelson, вот обновленная скрипта с использованием содержимого/описания, но без лишних строк, изображений и ссылок: jsfiddle.net/ezanker/emdypzqy/2 - person ezanker; 29.05.2015
comment
Куда вы вставили console.log(postlist); когда я помещаю его во все, что я получаю, это объект объект объект... - person kami nelson; 29.05.2015
comment
@kaminelson: jsfiddle.net/ezanker/emdypzqy/3 вы можете развернуть объект в приставка - person ezanker; 29.05.2015
comment
Ты обалденный. Поскольку первое изображение слишком большое, есть ли способ не показывать это изображение? - person kami nelson; 29.05.2015