Onsen UI 编译隐藏页面元素答案

【问题标题】：Onsen UI compile hides page elementsOnsen UI 编译隐藏页面元素
【发布时间】：2016-02-14 19:04:09
【问题描述】：

我正在尝试将进度微调器添加到显示搜索结果的 onsen-list 元素。每次我添加进度元素并编译它或列表时，搜索输入都会在我键入时消失 - 但仅在调试器应用程序中。这是我的代码：

页面：

<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 onsen-ui monaca

【解决方案1】：

一种更简单的方法是将其包含在 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();

【讨论】：

所以我实现了您的解决方案，但结果仍然相同，因为输入在快速输入时消失了。如果我将 spin 设置为 false，一切都会按预期工作。
你是说输入框还是说内容。我认为这将取决于您所做的 javascript 代码，可能是您正在重新加载一些数据，然后在加载时您当然应该执行 $('#mySpinner').show();
另一种解决方案是让用户先按“搜索”按钮，然后执行逻辑。
抱歉，我不认为我在解释问题。我的微调器工作得很好。问题是如果它正在旋转并且用户正在输入搜索输入，则搜索输入在连续的按键事件中消失 - 几乎就像它没有被刷新或其他东西一样。如果我将 spin 设置为 false，则不会发生这种情况。