Passing variables to child component, and getting NaN returns

Question

I have a component being called within a repeater. Within the call, i'm passing several variables to the component. All of them work fine except for one named totalSpan... which is returning a NaN for some reason. Here's the code I'm working with:

Parent:

<mx:Repeater id="indPositions" dataProvider="{projectPositions}" startingIndex="0" count="{projectPositions.length}">
        <components:block height="28"
            id="thisBlock" visible="true" horizontalScrollPolicy="off"
            width="{projectWidth}"
            oneDay="{Number(oneDay)}"
            offSet="{indPositions.currentItem[0]}"
            numDays="{indPositions.currentItem[1]}"
            position="{indPositions.currentItem[2]}"
            sName="{indPositions.currentItem[3]}"
            projectName="{projectTitle}"
            totalSpan="{Number(Math.round(projectWidth.vl / oneDay))}"
        />
    </mx:Repeater>

All of the variables in there work fine and will typeof() just fine.

Here's the child code:

[Bindable] public var totalSpan:Number;

and then in the init() function I perform a simple:

Alert.show(String(totalSpan));

The alert returns "NaN".

On a semi-related note, i'm getting warnings on the following lines of the parent:

offSet="{indPositions.currentItem[0]}"
numDays="{indPositions.currentItem[1]}"
position="{indPositions.currentItem[2]}"
sName="{indPositions.currentItem[3]}"

with an message that says "Data binding will not be able to detect chances when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead.

Can anybody shed some light on these warning errors? an example would be greatly appreciated.

Answer 1

First of all the assignment of totalSpan is the following:

totalSpan="{Number(Math.round(projectWidth.vl / oneDay))}"

but from width="{projectWidth}" we can see projectWidth is a Number or int. So it hasn't vl property. And your Number(Math.round(projectWidth.vl / oneDay)) is NaN. Please rewrite it properly. Maybe it should be the following:

totalSpan="{Number(Math.round(projectWidth / oneDay))}"

About the second part. If you're using {} in MXML it stands for data binding. Data binding provides changes in target attributes with changes of source. And the message says Array is a primitive type and mxmlc compiler can't generate code for it to handle changes in array's values.

But it is obvious from code you have some problems with data structures. It is very hard to improve it do not having the whole project's code but you should use custom data types with required [Bindable] metadata for data binding and ArrayCollection instead of Array for data used as a source of data binding.

Try to create something like:

[Bindable]
class MyDataObject
{
    public var offSet:int;
    public var numDays:int;
    public var position:int;
    public var sName:String;
}

and put these items to data provider of your repeater. As far as I can understand now your data provider is for repeater length but in real life it should provide repeater elements data. So if you pass into your repeater an ArrayCollection of your custom MyDataObject objects you can use something like the following:

<mx:Repeater id="indPositions" dataProvider="{projectPositions}">
        <components:block height="28"
            id="thisBlock" visible="true" horizontalScrollPolicy="off"
            width="{projectWidth}"
            oneDay="{Number(oneDay)}"
            offSet="{indPositions.currentItem.offSet}"
            numDays="{indPositions.currentItem.numDays}"
            position="{indPositions.currentItem.position}"
            sName="{indPositions.currentItem.sName}"
            projectName="{projectTitle}"
            totalSpan="{Number(Math.round(projectWidth / oneDay))}"
        />
</mx:Repeater>

And even more. You can pass the whole object of MyDataObject type to your components:block component:

<mx:Repeater id="indPositions" dataProvider="{projectPositions}">
        <components:block height="28"
            id="thisBlock" visible="true" horizontalScrollPolicy="off"
            width="{projectWidth}"
            oneDay="{Number(oneDay)}"
            myData="{MyDataObject(currentItem)}"
            projectName="{projectTitle}"
            totalSpan="{Number(Math.round(projectWidth / oneDay))}"
        />
</mx:Repeater>

Hope these thoughts help!