15028


ネットで見かけたサンプルを使わせていただいてアプリを開発していますが、どうにも上手く表示させれないので質問させて頂きます。

どうも画面のほうが先に描画されている気がします。  
アプリ起動時は何も表示できなくてpreタグで表示している配列も空なのですが。  
タブバーのtestボタンをタップすると表示されます。

list.htmlはなぜかコピペできなかったので手書き、重要な箇所だけを手打ちしたので記述ミスあるかもしれないです。

どうすれば起動時から表示できるようになるでしょうか？

## script.js

* * *
[code]

    // アプリの設定
    'use strict';
    
    // APIの読み込み
    google.load("feeds", "1");
    var app = ons.bootstrap('myApp');
    
    // 表示させる記事の数
    var disp_entry_count = 10;
    
    // 取得するサイトURL
    var site = new Array();
    
    site[0] = {
      title: 'GIZUMODO',
      url: 'http://feeds.gizmodo.jp/rss/gizmodo/index.xml',
      disp_entry: 2 // 取得する記事の数
    };
    
    site[1] = {
      title: 'Gigazin',
      url: 'http://feed.rssad.jp/rss/gigazine/rss_2.0',
      disp_entry: 3 // 取得する記事の数
    };
    
    site[2] = {
      title: 'ウェブソク',
      url: 'http://news.7zz.jp/feed',
      disp_entry: 5 // 取得する記事の数
    };
    
    // △△ここまでアプリの設定△△
    
    function init() {
    
      var channel = new Array();
      var entry = new Array();
      var entries = new Array();
      var Feed = "";
    
      var site_count = 0;
    
      for (var i = 0; i < site.length; i++) {
    
        // 読み込むRSSを設定
        var feed = new google.feeds.Feed(site[i]['url']);
        feed.setNumEntries(site[i]['disp_entry'])
        feed.load(function(rss) {
    
          var hoge = setInterval(function() {
    
            //終了条件
            if (!rss == nil) {
              clearInterval(hoge);
              console.log("終わり");
            }
          }, 500);
    
          if (!rss.error) {
            // RSSからサイトの情報を配列に格納
            channel['title'] = rss.feed.title;
            channel['link'] = rss.feed.link;
    
            channel['description'] = rss.feed.description;
            channel['author'] = rss.feed.author;
    
            // RSSから記事の情報を配列に格納
            for (var j = 0; j < rss.feed.entries.length; j++) {
    
              var feed_entry = rss.feed.entries[j];
              var entry = {
                site_title: channel['title'],
                site_link: channel['link'],
                //  site_favicon : channel['favicon'],
                title: feed_entry.title,
                link: feed_entry.link,
                content: feed_entry.content,
                contentSnippet: feed_entry.contentSnippet,
                publishedDate: feed_entry.publishedDate
              };
    
              var date = new Date(entry['publishedDate']);
              entry['time'] = date.getTime();
              var yy = date.getYear();
              var mm = date.getMonth() + 1;
              var dd = date.getDate();
              if (yy < 2000) {
                yy += 1900;
              }
              if (mm < 10) {
                mm = "0" + mm;
              }
              if (dd < 10) {
                dd = "0" + dd;
              }
              entry['date'] = yy + "年" + mm + "月" + dd + "日";
    
              entries.push(entry);
            }
          }
          site_count++;
          if (site.length == site_count) {
            disp();
          }
        });
      }
      return entries;
    }
    
    //日付順に並べ替え
    function disp() {
      entries.sort(function(b1, b2) {
        return b1.time < b2.time ? 1 : -1;
      });
    }
    
    app.controller('main', function($scope) {
      $scope.data = init();
    });
    
[/code]

* * *

## list.html

* * *
[code]

    <ons-list ng-controller="main">
      <ons-list-item ng-repeat="item in dara">
        <ons-row>
          <ons-col>
            <div>{{ item.site_title }}</div>
            <div>   
              <span>{{ item.title }}</span> 
            </div>
            <div>{{ item.dis }}</div>
          </ons-col>
        </ons-row>
      </ons-list-item>
    </ons-list>
    
    <!--デバッグ用-->
    <ons-list-item>
      <pre>{{ data|json }}</pre>
    </ons-list-item>
    
[/code]

## inedx.html

* * *

  
  
  
  

[code]

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="js/angular/angula.js"></script>
    
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
    
        <link rel="stylesheet" href="css/onsenui.css">
        <link rel="stylesheet" href="css/onsen-css-components-blue-basic-theme.css">
        <link rel="stylesheet" href="css/timeline.css">
        <script type="text/javascript" src="js/onsenui.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    
      </head>
    
      <body>
    
        <ons-tabbar>
          <ons-tab page="list.html" active="true">
            <ons-icon icon="ion-home" class="tab-icon">test</ons-icon>
          </ons-tab>
          <ons-tab page="temp.html">
            <div class="notification reply-notification" ons-tab-inactive>4</div>
            <ons-icon icon="ion-at" class="tab-icon"></ons-icon>
          </ons-tab>
          <ons-tab page="temp.html">
            <ons-icon icon="ion-heart" class="tab-icon"></ons-icon>
          </ons-tab>
          <ons-tab page="temp.html">
            <ons-icon icon="ion-person" class="tab-icon"></ons-icon>
          </ons-tab>
        </ons-tabbar>
    
      </body>
    </html>
    
[/code]

![画像の説明をここに入力](https://i.stack.imgur.com/HzzOV.png)  
![画像の説明をここに入力](https://i.stack.imgur.com/Rb0S9.png)


CC BY-SA 3.0
2015-06-23T15:02:35.050
11651
2015-08-30T05:26:39.307
2015-06-24T01:42:46.283
3516
5967
question
monaca onsen-ui angularjs
monacaでAngularjsとOnsenUIを使ってリストを表示したい


サーバーなどからデータを取得するときはAngularのデータバインディングがうまく作用しない場合があります  
$scope.dataをapplyで囲ってあげると直ると思います。  
$scope.$apply(function(){  
//$scopeの更新処理  
});

みたいな感じです。またはtimeoutなどが使えるかと


CC BY-SA 3.0
2015-06-30T06:02:34.793
11874
2015-06-30T06:02:34.793
8748
11651
answer


だいぶ時間が経過していますが、これは非同期によるもので、init()は取得前の空のentriesを先に返すため、起動時に$scope.dataに反映されず表示されません。  
各処理の間にconsole.log()を入れて動作させればわかります。  
例えば、init()に$scopeを渡して、データがすべて揃った段階で$scope.$emit()でデータを渡し、コントローラ側の$scope.$on()でデータを受け取るようにすれば解決できると思います。

[code]

    app.controller("main", function($scope) {
        ons.ready(function() {
            init($scope);
        });
        $scope.$on("updateData", function(e, entries) {
            $scope.data = entries;
            $scope.$apply();
        });
    });
    
    function init($scope) {
        var entries = [];
        // 取得処理
        //
        //
        // すべてのデータが揃った場合
        $scope.$emit("updateData", entries);
    }
    
[/code]


CC BY-SA 3.0
2015-08-30T05:26:39.307
15028
2015-08-30T05:26:39.307
9566
11651
answer