titanium alloy get value of field in view

Question

I've been building my first Titanium Alloy app and I have a 5 step signup form that has different form fields spread across 5 views. On my last step I want to post the values of the form elements. What is the best way to access each fields value? eg. in screen5 how do I get the value of the $.name field in the screen1 view?

Here is some of my code:

<ScrollableView id="indexSV" showPagingControl="false" scrollingEnabled="false" top="0">
            <Require src="screen1" id="screen1"></Require>
            <Require src="screen2" id="screen2"></Require>
            <Require src="screen3" id="screen3"></Require>
            <Require src="screen4" id="screen4"></Require>
            <Require src="screen5" id="screen5"></Require>
        </ScrollableView>

and here is how the screens are structured:

<Alloy>
<View>
    <Label top="20">YOUR NAME:</Label>
    <TextField top="5" id="name" />
    <Button top="20" right="10%" id="btnNext" width="120" onClick="next" class="next">NEXT STEP</Button>
</View>
</Alloy>

turtle turtle · Accepted Answer · 2014-12-02T04:20:31

Currently I can think of following two ways:

1. Define the global JSON object in alloy.js :

In alloy.js define global variable as followed:

Alloy.Globals.signUpValues = {
  name : "",
  email : ""
};

Now in controller of the screens, assign the fetched value to the Alloy.Globals.signUpValues. Like for screen1's controller you could do something like:

function next() {
  Alloy.Globals.signUpValues.name = $.name.value;
}

And finally you can fetch all the values in the desired screen using :

var signupJSON = Alloy.Globals.signUpValues;

2. Using callbacks in required view : You can trigger the function in the controller of the require screen and access the response send by view's controller back to the main controller. So you can do something like :

In main controller :

$.screen1.callback(function(name)
{
  $.screen5.initName(name); //pass name value to screen5's controller
});

In screen1's controller :

var nextCallback;
exports.callback = function (callback)
{
  nextCallback = callback;
};

function next(e) {
  nextCallback($.name.value);
}

In screen5's controller :

var name;
exports.initName = function (nameVal)
{
  name = nameVal;
};

P.S : IMO, option 1 is much cleaner and easy to maintain.

titanium alloy get value of field in view

2 Answers