04 11 2012 javascript Ti Tweet
alloy / test / apps / advanced / inheritanceを読んでみた。継承は分かりやすいが、windowまわりがいまいちわからん。
controller/index.js
$.index.open(); function openDialog(e) { Alloy.createController(e.source.title, { message: 'Opened ' + e.source.title }).openDialog($.index); }
createControllerメソッドで文字列を渡すとコントローラーが作られる。
views/index.xmlはこんな感じになっていて
<Alloy> <Window> <View layout="vertical"> <Button onClick="openDialog">baseDialog</Button> <Button onClick="openDialog">animatedDialog</Button> </View> </Window> </Alloy>
Buttonのtextじゃなくてtitleで渡される(e.source.title)みたいだ。コード追っかけててちょっと引っかかった。
openDialogメソッドはそれぞれのコントローラーで実装されている。
controllers/baseDialog.js
var args = arguments[0] || {}; $.message.text = args.message || 'dialog'; exports.openDialog = function(win) { $.refWin = win; $.refWin.add($.cover); $.refWin.add($.dialog); } exports.closeDialog = function() { $.refWin.remove($.cover); $.refWin.remove($.dialog); $.refWin = $.cover = $.dialog = null; }
refWinってなんだよ？と思ったが新しい属性作って放り込んでいるだけなのかな？あとWindowにWindowを追加してんの?($.refWin.add)。それとも$.cover,$dialogはviewなんだろうか？コンパイル後のコードを読むにはどうしたらいいんだろうか？
継承はexports.baseControllerにスーパークラスを指定する。あとは普通にメソッドを上書きすればいい。
// Establish inheritance from baseDialog exports.baseController = 'baseDialog'; // Override baseDialog's openDialog() function. We will still // be able to use baseDialog's closeDialog() function. exports.openDialog = function(win) { $.refWin = win; ... }