View doesn't call model transform function

[beppo-ivel]

With respect to the minimal working example below, I run into the following issue that "$myLbl" is empty in the last step:

1. start app
2. navigate to Tab2
3. click create form the menu
4. click home arrow on the actionbar
5. note no text appears in "myLbl". The expected output of myLbl is "0:0:0". Why is it empty?

index.xml

<Alloy>
   <TabGroup title="TabGroup">
      <Require src="tab1" />
      <Require src="tab2" />
   </TabGroup>
</Alloy>

tab1.xml

<Alloy>
  <Model src="ride" />
  <Tab id="tab1" title="Tab1">
    <Window id="window1" title="Window1"  onClose="cleanup">
      <Label id="myLbl"  text="{tab1.totalSecondsFormatted}" />
    </Window>
  </Tab>
</Alloy>

tab2.xml

<Alloy>
  <Tab id="tab2" title="Tab2">
    <Window id="window2" title="Window2"  onClose="cleanup">
      <Menu>
        <MenuItem title="New" onClick="create"/>
      </Menu>
    </Window>
  </Tab>
</Alloy>

createSomething.xml

<Alloy>
    <Window id="window3" title="New Something" onClose="cleanup">
      <ActionBar id="actionbar" displayHomeAsUp="true" onHomeIconItemSelected="closeWindow" />
    </Window>
</Alloy>

controllers/index.js

if (OS_ANDROID) {
	$.index.addEventListener('open', function() {
		// When we are asked to create the TabGroup Action Bar menu
		$.index.activity.onCreateOptionsMenu = function(e) {
			// If the Window of the active Tab has defined a menu
			if ($.index.activeTab.window.activity.onCreateOptionsMenu) {
				// Pass the request on
				$.index.activeTab.window.activity.onCreateOptionsMenu(e);
			}
		};
	});
	// When the active tab changes
	$.index.addEventListener('focus', function(e) {
	// Recreate the TabGroup Action Bar menu
		$.index.activity.invalidateOptionsMenu();
	});
}
$.index.open();

controllers/tab1.js

(function() {
  Alloy.Models.tab1.set({totalSeconds: 0 });
})();
function cleanup() {
    $.destroy();
}

controllers/tab2.js

function cleanup() {
    $.destroy();
}
function create(){
	Alloy.createController('createSomething').getView().open();
}

controllers/createSomething.js

function cleanup() {
    $.destroy();
}
function closeWindow(){
  var home = Alloy.createController('index').getView();
  home.open();
  //home.setActiveTab(1);
}

models/tab1.js

exports.definition = {
    config: {
        "columns": {
            "totalSeconds": "INTEGER",
            "id": "INTEGER PRIMARY KEY AUTOINCREMENT"
        },
        "adapter": {
            "type": "sql",
            "collection_name": "tab1",
            "idAttribute": "id"
        }
    },
    extendModel: function(Model) {
      _.extend(Model.prototype, {
        transform: function () {
          var model = this;
          var transformed = model.toJSON();
          Object.defineProperty(transformed, 'totalSecondsFormatted', {
            get: function () {
              let hours = Math.floor(transformed.totalSeconds / 3600);
              let min = Math.floor(transformed.totalSeconds / 60 % 60);
              let sec = parseInt(transformed.totalSeconds % 60);
              return '' + hours + ':' + min + ':' + sec;
            }
          });
          return transformed;
        }
      });
      return Model;
    }
};

[m1ga]

out of curiosity: why do you open the index again? Just close the window $.window3.close(); in createSomething and you are back to the previous index.

If you want to keep it like this add

Alloy.Models.tab1.fetch();

to tab1.js.