1

Monacaを最近使い始めたものです。15年ぶりのプログラムなので隔世の感があります。
さて、Monacaで提供されているRSSフィードサンプルをベースにSmartNewsっぽいものをつくるべくコーディングを試行錯誤しているのですが、知識が足りず、OnsenUI内にてJSを呼ぶことが出来ておりません。
・起動時の画面描画までは成功
・各記事をタップしたときにFeedを記述した関数にアクションが伝わっていない
・下記Pull-hookにてFeedUが起動しない
の部分にて煮詰まっております。
の記述が違う等おそらく数行の間違いではないかと思っておるのですが、ご指摘いただければ幸いです。

よろしくお願いします。

page1.html

<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
        </div>
        <div class="center">概況</div>
        <div class="right">
            <img src="Logo_h40.jpg" alt="" />
        </div>
    </ons-toolbar>

    <div id="mask">
      <div id="loading"><img src="animation.gif"></div>
    </div>
    <div id="feed-list">
    </div>
    <p id="error-message"></p>
    // 下記Pull-hookにてFeedUが走らず(画面生成時には走っている)
    <ons-pull-hook ng-action="$(feedU($done))" var="loader">
        <span ng-switch="loader.getCurrentState()">
            <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> 更新するにはプルダウンしてください</span>
            <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> 手をはなしてください</span>
            <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> データを読み込んでいます...</span>
        </span>
    </ons-pull-hook>

</ons-page>

<script>
// CHANGE YOUR URL HERE!
var feedUrl = "http://etc.com/feed/";

$(function($done) {
    var made = new Date();;
    //console.log(made.getTime());
    var feed = new Feed({
        url: feedURL
    });
    feed.load();
    //$done;

    if (monaca.isIOS) {
        $('.toolbar').css('margin-top', '20px');
        $('.button').css('top', '20px');
    } 
});

$(function feedU($done) {
    var made = new Date();;
    //console.log(made.getTime() + "feedU");
    var feed = new Feed({
        url: feedURL
    });
    feed.load();
    $done();
});
</script>

index.html

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>ons.bootstrap();</script> 
    <script src="js/feed-reader.js"></script>
</head>
<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
</body>
2
  • 差し支えなければindex.htmlも記載した方が状況が伝わりやすいかなと思います。
    – ita_3y
    Commented 2015年8月31日 3:13
  • はい、index.htmlですが、下記になっています。 よろしくお願いします。
    – godzilla
    Commented 2015年8月31日 7:48

2 件の回答 2

1

OnsenUIはAngularJSをベースにしています。
RSSリーダーのサンプルはjQueryを使用しているため、同時に使うにはコツがいるように思います。

参考:「AngularJS jQuery」で検索した上位2件ですが・・・
AngularJS 製アプリで jQuery を使いたい
angularJS と jQuery に関する誤解を解く

ons-pull-hookを使いたいのであれば、こちらをベースにカスタマイズしていった方がやりやすいかもしれません。

プルフックを使う(OnsenUIの公式ガイドです)
公式ガイドのサンプルのソースコード(CodePen)

1
  • ヒントありがとうございます。さらに調べます。
    – godzilla
    Commented 2015年9月5日 13:49
1

結論から言うと、OnsenUIにおけるページ遷移では、別のHTMLファイルへの遷移時に、そのファイル上のscriptは動かないようです。
OnsenUIは、あくまでindex.html上で(他のファイル内の)ons-pageの中身を表示しているだけだからというのがその理由です。(この辺りの正確なことはわかりませんが、経験上ではそんな感じです)

よって、対処法としては、

  • index.html上にscriptを書く
  • 別のJSファイルに書いて、index.htmlにて読み込む

などが、簡単で良いと思います。

なお、私はangular党でjQueryについては門外漢のため、jQueryでの実装方についてはわかりません。

1
  • ありがとうございます。いただいた方法で一回動くようにしてみます。
    – godzilla
    Commented 2015年9月5日 13:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。