7084


環境：Moanca for Visual Studio  
Cordova 4.1.0  
ONSEN UI 1.2.1  
AngularJS: 1.3.0(ONSEN UI標準組み込み）  
Android MonacaDebugger 3.2.0

サンプルのOnsen UI ナビ付 タブバーを元に以下のようなコードを書いていますが、ons-
navigatorのデフォルトページpage1.html内部の#btnShowArchivesを取得するにはどうしたらいいでしょうか

index.html

[code]

    <body>
        <ons-tabbar var="tabbar">
            <ons-tab
                icon="home"
                label="Home"
                page="navigator.html"
                active="true"></ons-tab>
            <ons-tab
                icon="gear"
                label="Settings"
                page="settings.html"></ons-tab>
        </ons-tabbar>
    </body>
    
[/code]

navigator.html

[code]

    <ons-navigator var="myNavigator" page="page1.html">
    </ons-navigator> 
    
[/code]

page1.html

[code]

    <ons-button id="btnShowArchives" >
        Shuffle phone or push this button
    </ons-button>
    
[/code]

ここで、index.htmlから読み込んでいるmain.jsファイルに以下のようなコードを書いても反応しません。

[code]

    document.addEventListener("deviceready", function () {
        var btnShowArchives = ons.findComponent('#btnShowArchives', document.body);
        btnShowArchives.on("click", function (event) {
            console.log('test');
        });
    }, false);
    
[/code]

以下の方法も試してみましたがエラーが出ます。

[code]

    document.addEventListener("deviceready", function () {
        var btnShowArchives = document.getElementById("btnShowArchives");
        //error
        btnShowArchives.on("click", function (event) {
            console.log('test');
        });
    
    }, false);
    
[/code]

ons-navigatorのページ追加イベントを使うのかとも思いましたがこれも反応しません。

[code]

    myNavigator.on("postpush", function (event) {
        console.log(event);
    });
    
[/code]

これに限らずOnsen UIのons-
tabbarなどの複数ページ管理UIで、index.html以外に書かれてるオブジェクトの取得方法がいまいちわかりません(サンプルアプリにも載ってない)。

以上、よろしくお願いします。


CC BY-SA 3.0
2015-02-21T17:02:50.317
6878
2015-02-25T13:06:33.280
2015-02-24T23:52:05.557
816
816
question
monaca onsen-ui
ons-navigatorのデフォルトページのコンポーネントを取得する方法

[code]

    ons.ready(function(){
      tabbar.on('postchange', function(e){
        if(e.index === 0){
          myNavigator.on('postpush', function(e){
            if(e.enterPage.name === 'page1.html'){
              var btnShowArchives = angular.element(document.getElementById('btnShowArchives'));
              btnShowArchives.on('click', function(){
                alert("clicked");
              });
            }
          });
        }
      });
    });
    
[/code]

試しにやってみました。こうすれば一応取得できます。ただし階層が深くなるのでスマートではないですね。

複数ページを管理するときはAngularJSを使うと簡潔に書けますので、そちらも検討されてみてはいかがでしょうか。  
<http://ja.onsen.io/guide/overview.html#UsingOnsenUIwithAngularJS>


CC BY-SA 3.0
2015-02-24T04:43:48.097
7006
2015-02-24T05:19:28.690
2015-02-24T05:19:28.690
4978
8519
6878
answer


citherさんの回答から以下のページを見たところ次のようにすればいいことがわかりました。

<http://ja.onsen.io/guide/overview.html#UsingOnsenUIwithAngularJS>

page1.html

[code]

    <div ng-controller="PageController"><!-- ng-controller属性を指定する -->
        <ons-button id="btnShowArchives">
            Shuffle phone or push this button
        </ons-button>
    </div>
    
[/code]

main.js

[code]

    var module = ons.bootstrap('my-app', ['onsen']);
    //ng-controller属性で指定した文字列
    module.controller('PageController', function ($scope) {
        ons.ready(function () {
            var btnShowArchives = $('#btnShowArchives');
            btnShowArchives.on("click", function (event) {
                console.log('test');
            });
        });
    });
    
[/code]

こちらの質問( [ONSEN UI +
JQueryのタブ切り替え時のons.readyとscriptについて](https://ja.stackoverflow.com/questions/5942/onsen-
ui-
jquery%E3%81%AE%E3%82%BF%E3%83%96%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E6%99%82%E3%81%AEons-
ready%E3%81%A8script%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6) )
の方も同じような問題にぶつかってますがAngularJS必須なら必須と書いて欲しいところです。

Onsen
UIは同じCordova向けフレームワークのIonicと比べてjQueryが使えてドキュメントが充実してそうに見えたから選んだんですが、この分だとIonicも再検討した方がいいかもしれません。


CC BY-SA 3.0
2015-02-25T13:06:33.280
7084
2015-02-25T13:06:33.280
2017-04-13T12:52:39.113
-1
816
6878
answer