2017-04-14 24 views
0

Onsen-UIの基本的なtodo-listの例を変更しようとしています。Monacaアプリはダッシュボードプレビューで動作しますが、Android 6の電話機では動作しません

メニューに新しいボタンを追加しました。

<ons-toolbar-button id="resptab" > 
    <ons-icon icon="ion-pie-graph" size="28px"></ons-icon> 
    Table 
</ons-toolbar-button> 

とナビゲータは、リスト

<ons-splitter id="splitter"> 
    <ons-splitter-side id="splitter-menu" page="menu.html" 
     side="left" width="220px" collapse swipeable> 
    </ons-splitter-side> 
    <ons-splitter-content> 
     <ons-navigator id="myNavigator" animation="slide" page="list.html"/> 
    </ons-splitter-content> 
</ons-splitter> 

私はイベントリスナー

document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this)); 

と機能を通じてスクリプトから新しいページを押してるのラッピング

todo.setRespTable = function() { 
    ons.notification.prompt('Switch to responsive table view',{ 
     title: 'Responsive Table', 
     cancelable: true, 

     callback: function(label) { 
      document.querySelector('#myNavigator').pushPage('table.html') 
     }.bind(this) 
    });  
} 

すべてがexpとして正常に動作しますプレビューと私のデスクトップのダッシュボードにectedが、私は私の銀河Androidの6電話でモナカデバッガでそれをしようとすると、それはquerySelectornull

であることを示すログのエラーで失敗し、私はまた、上記には、ボタンを言ったことに気付きましたAndroidの携帯電話でアプリを実行するとメニューに表示されませんが、もう一度 - ダッシュボードのプレビューから見ることができます。

答えて

0

は、メニュー項目

<ons-list> 
    <ons-list-item data-filter="all" tappable>All</ons-list-item> 
    <ons-list-header>Status</ons-list-header> 
    <ons-list-item data-filer="uncompleted">Pending</ons-list-item> 
    <ons-list-item data-filter="completed">Completed</ons-list-item> 
    <ons-list-header>Responsive</ons-list-header> 
    <ons-list-item id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>RxTable</ons-list-item>   
</ons-list> 

でボタンを置き換えることによって、およびIn

todo.menuInit = function(target) { 
    document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));  
} 

を呼び出すメニューのinit

document.addEventListener('init', function(event) { 
    var view = event.target.id; 
    if (view === 'menu' || view === 'list') { 
     todo[view + 'Init'](event.target); 
    }; 
}, false); 

にイベントハンドラを設定することによって、両方の問題を解決しますこのarticleの終わりには、対応するバージョンがReactionのあるOnsenUIにあります。

後者の場合、配列関数が値をメソッドに渡すことに注意してください。

関連する問題