Обновить при изменении атрибута в Jquery-mobile? - PullRequest
Новая
       9

Обновить при изменении атрибута в Jquery-mobile?

2 голосов
/ 14 февраля 2012

Сокращенный код показывает, что я могу изменить атрибут, в данном случае иконку разделения данных, но не могу получить обновление. Console.log показывает, что он изменился, как и представление элементов в инструментах разработчика Chrome.

http://jsfiddle.net/mckennatim/MQ9rj/ Кнопка «Получить» имитирует программно созданный список. Кнопка «Изменить» имитирует изменение атрибута.

Обновить, просмотр списка, триггер, создать, создание страницы Я пробую все комбинации. Ничего не работает 

<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>   
</head>
<body>
    <div id="thelists" data-role="page">

        <div data-role="header">
            <a href="#" data-icon="back"  id="get" data-role="button" >get</a>
                <h2>TestPage</h2>
            <a href="#" data-icon="home" id="change" data-role="button">change</a>
        </div><!-- /header -->       
        <div data-role="content">   
            <ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
        </div><!-- /content -->
    </div><!-- /page -->
<script>
    $('#get').click(function() {
        for (i=1; i<6; i++){
            $('#list').append('<li><a>list</a><a class="orig">items</a></li>');
        }
        $('#list').listview('refresh');
        return false; 
    }); 
    $('#change').click(function() {
        console.log($('ul').attr('data-split-icon'));
        $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
        console.log($('ul').attr('data-split-icon'));
        //$('#list').listview();
        //$('#list').listview('refresh');
        $('#thelists').trigger('create');
        $('#thelists').trigger('pagecreate');   
        $('#list').listview();
        $('#list').listview('refresh');
        return false; 
    });              
</script>    
</body>
</html>

1 Ответ

3 голосов
/ 14 февраля 2012

Похоже, jQM также добавляет некоторую разметку для дочерних тегов span, попробуйте что-то вроде этого

JS 

$('#change').click(function() {
    console.log($('ul').attr('data-split-icon'));
    $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
    console.log($('ul').attr('data-split-icon'));
    $("[data-icon=gear]").each(function() {
        var $this = $(this);
        $this.attr('data-icon','info');
        $this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');                
    });
    $('#list').listview('refresh',true);
    return false; 
});
...