Alright so I've recently discovered how to inherit and override(if necessary) functions in Alloy controllers using exports.BaseController. So now I have this view page that contains a table whose rows are dynamically generated. Here's the xml view file and the associated controller file(part of it) below:
parentView.xml
<Alloy>
<Window id="currentWin">
<LeftNavButton>
<Button id="backBtn" onClick="goBack"/>
</LeftNavButton>
<TitleControl>
<Label id="titleLabel"/>
</TitleControl>
<TableView id="menuTable"/>
</Window>
</Alloy>
parentView.js
var dataArray = [];
var generateRows = function(){
//code to create a number of TableViewRow instances and push them into dataArray
};
exports.generateRows = generateRows;
generateRows(); //problem area
$.menuTable.setData(dataArray);
Now here is the controller that I'm using to inherit the above genrateRows function and override its functionality:
childView.js
exports.baseController = "parentView";
var generateMyRows = function() {
//code to create a number of TableViewRow instances and push them into dataArray
};
exports.generateRows = generateMyRows;
My understanding of overriding using the exports.baseController in childView.js is that when the generateRows()
call(problem area) is made, the generateMyRows()
method of childView.js is called. However this is not the case. The tableview is still getting populated by the generateRows()
function of parentView.js. Please help me out, I've been breaking my head over this for hours!