037-次のxxx件を読み込む処理の実装は半分完成 - 40歳からのキャリアチェンジ

実際に実装しはじめると自分のスキルの無さを痛感してます。。。

簡単に出来ると思ったけど最後の最後でうまくいかないのでその点についてまとめておきます

処理の流れについて簡単

アプリ起動。5件分のエントリを表示
「次の5件を読み込む」という箇所をクリックすることで、clickイベント発火
updateメソッドが呼び出され、現在何ページまで読み込まれているのかを確認した上でgetメソッド使って、xhr使ってブログのエントリ情報を取得
xhrで得た結果をmakeEntryListメソッド使って、配列（Bloggerクラスのlist）に突っ込む。デバッグのために、Titanium.API.info(entry.permalink)を実行すると、意図したとおりに次の5件分のparmalinkが取得できている
上記で取得した5件分のエントリ一覧を追加する←これがわからず現在苦戦中

TitaniumMobileで、こういう処理のサンプルのコードがうまく見つけられないので、Objective-CでiPhoneアプリ開発の解説している本とか読み漁ったほうが良い気がしてきました。

現在のソースコード

// ラベルの見た目の部分はview/styles.jsというファイルにまとめている
Titanium.include(Titanium.App.appURLToPath("app://view/styles.js"));
var win = Ti.UI.currentWindow;

var tableView = Ti.UI.createTableView({
  data:data
});

var data = [];

var Blogger = function(blogger){
  this.blogger = blogger;
  this.xhr = Titanium.Network.createHTTPClient();
  this.list = [];
  this.entry_list_length = 5;
  this.pagenumber = 1;
};

Blogger.prototype = {
  get:function(url){
    var _url='',self = this;
    /*
     初期化する時は引数にURLを指定せず、追加情報を更新するときには
     該当URLを引数に与えることでgetメソッドを使い回すことが可能になる
     ので、このように処理している
     */
    if(url) {
      _url = url;
    } else {
      _url =  "http://localhost:4567/api/"
	+ this.blogger
	+ "/"
	+ this.pagenumber;
    }
    Titanium.API.info('URL IS:' + _url);
    self.xhr.open('GET',_url);

    self.xhr.onload = function(){
      var entries = JSON.parse(this.responseText);

      //ここでレイアウト情報を生成するようなメソッドを呼び出せばOK?
      self.makeEntryList(entries);
    };
    self.xhr.send();

  },
  makeEntryList:function(obj){
    for(var i=0;i<this.entry_list_length + 1;i++){
      var entry = obj[i];
      if(entry){
	Titanium.API.info(entry.permalink);
      }
      this.list.push(obj[i]);
    }
    var data = this.createTableView(this.list);
    return this.setData(data);
  },

  createTableView:function(obj){
    var self = this;
    var _data = [];
    for(var i=0;i<this.entry_list_length + 1;i++){
      if(i===5){
	var next_row = Ti.UI.createTableViewRow({
	  hasChild:false,
	  height:80
	});
	var next = Ti.UI.createLabel(styles["titleLabel"]);
	next.text = "次の" + this.entry_list_length + "件を読み込む";
	next_row.add(next);
	next_row.addEventListener('click',function(e){
	//
	self.update();
      });
      _data.push(next_row);

      } else {
	var entry =  obj[i];
	var row = Ti.UI.createTableViewRow({
	  hasChild:true,
	  data:entry,
	  height:80
	});
	// 記事の詳細情報を表示
	row.addEventListener('click', function(e){
	  var title = e.rowData.data.title;
	  var html_body = e.rowData.data.html_body;
	  var permalink = e.rowData.data.permalink;
	  var win = Titanium.UI.createWindow({ });
	  var webView =  Ti.UI.createWebView();
	  webView.html = '<html><body>' + html_body + '</body></html>';
	  win.add(webView);
	  Titanium.UI.currentTab.open(win,{animated:true});
	});

	var title = Ti.UI.createLabel(styles["titleLabel"]);
	title.text = entry.title,
	row.add(title);
	var content = Ti.UI.createLabel(styles["contentLabel"]);
	content.text = entry.html_body.replace(/<\/?[^>]+>/gi, "");
	row.add(content);
	_data.push(row);
      }
    } // for loop end
    return _data;

  },
  setData:function(data){
    return tableView.setData(data);
  },
  close:function(){
    this.xhr.onload = null;
    this.xhr = null;
  },
  update:function(){
    Titanium.API.info(this.pagenumber);
    this.pagenumber++;
    Titanium.API.info('ページ数を更新。次に読むページは'+ this.pagenumber +'です');
    var url = "http://localhost:4567/api/"
	+ this.blogger
	+ '/'
	+ this.pagenumber;
    this.get(url);

  }
};
var blogger = new Blogger('hibi');
blogger.get();

win.add(tableView);