Компиляция пользовательского интерфейса Onsen скрывает элементы страницы

Я пытаюсь добавить счетчик прогресса в элемент списка онсенов, отображающий результаты поиска. Каждый раз, когда я добавляю элемент прогресса и компилирую его или список, поисковый ввод исчезает по мере ввода, но только в приложении отладчика. Вот мой код:

Страница:

<ons-page id="search-page">

<ons-toolbar>
    <div class="center">Search</div>
</ons-toolbar>

<div class="navigation-bar">
    <div class="navigation-bar__center">
        <input id="srch" type="search" class="search-input" autocomplete="off" autocorrect="off" autocapitalize="on" spellcheck="false">
        <button id="btn-clear-search"><ons-icon icon="ion-android-cancel" size="20px"></ons-icon></button>
    </div>
</div>

<ons-list id="lst-srch"></ons-list>

</ons-page>

Скрипт:

var $lstSrch = $( "#lst-srch" );

if( $( '.srch-progress' ).length == 0 ) {
    var $srchProgress = $('<ons-list-item>' +
            '<ons-row>' +                       
                '<ons-col>' +
                    '<center class="srch-progress"><ons-icon icon="ion-load-c" spin="true"></ons-icon></center>' +
                '</ons-col>' +
            '</ons-row>' +
        '</ons-list-item>');

    $lstSrch.prepend( $srchProgress );
    ons.compile( $( "#lst-srch" )[0] );
}

Есть ли лучший способ показать прогресс поиска?


jquery monaca onsen-ui
person MoreScratch    schedule 14.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

более простым способом было бы просто включить его в html (вам не нужно компилировать его), а затем скрыть его позже с помощью jquery.

Что-то вроде этого:

 <ons-page id="search-page">

    <ons-toolbar>
        <div class="center">Search</div>
    </ons-toolbar>

    <div class="navigation-bar">
        <div class="navigation-bar__center">
            <input id="srch" type="search" class="search-input" autocomplete="off" autocorrect="off" autocapitalize="on" spellcheck="false">
            <button id="btn-clear-search"><ons-icon icon="ion-android-cancel" size="20px"></ons-icon></button>
        </div>
    </div>

    <ons-list id="lst-srch">
        <ons-list-item id="mySpinner">
            <ons-row>                       
                <ons-col>
                    <center class="srch-progress"><ons-icon icon="ion-load-c" spin="true"></ons-icon></center>
                </ons-col>
            </ons-row>
       </ons-list-item>

    </ons-list>
</ons-page>

А в JQuery просто выполните:

$('#mySpinner').hide();
person Patrick Klitzke    schedule 15.02.2016
comment
Итак, я реализовал ваше решение, но результат все тот же: ввод исчезает при быстром наборе текста. Если я установлю для спина значение false, все будет работать так, как ожидалось. - person MoreScratch; 16.02.2016
comment
Вы имеете в виду поле ввода или вы имеете в виду содержимое. Я думаю, это будет зависеть от вашего кода javascript, который вы делаете, возможно, вы перезагружаете некоторые данные, а затем, пока они загружаются, вы, конечно, должны сделать $('#mySpinner').show(); - person Patrick Klitzke; 16.02.2016
comment
другим решением было бы позволить пользователю сначала нажать кнопку поиска, а затем выполнить логику. - person Patrick Klitzke; 16.02.2016
comment
Извините, я не думаю, что объясняю проблему. У меня спиннер работает отлично. Проблема в том, что если он вращается, и пользователь вводит поисковый ввод, поисковый ввод исчезает при последовательных событиях нажатия клавиш - почти как будто он не обновляется или что-то в этом роде. Если я установлю для спина значение false, этого не произойдет. - person MoreScratch; 16.02.2016