Javascript Array Of Textblock Elements From Xaml File

A working xaml file (Silverlight) has a lot of TextBlock elements. I need those for data manipulation, so I want to put them in a global array: var textBlockArray = []; function f

Solution 1:

If you really must stick with the Javascript API (I'm sure you have really good reason you aren't using the Managed API) then I would suggest you spend a little time reviewing the documentation.

You cannot manipulate the Xaml as if it has some how become part of your html documents DOM. The plugin handles the constructed set of Silverlight UI elements itself.

The Javascript API offers us no way to select out a simple collection of elements of a specific type. In fact it offers no way to simply have a flat collection of all the elements. We can create a javascript function to perform such an enumeration recursively on the basis that the only two elements that will contain other elements are a Panel or a Border.

Another issue is that the API it doesn't offer a good way to determine the type of an element either. Hence its not obvious how we determine whether an element is a Border, a Panel or TextBlock. However we could handle this by infering the type by testing the presence of a property that we would expect on that type (e.g., we expect a Children property on a `Panel).

Armed with all that we can start with an element enumerator:-

functionforEachDescendant(elem, callBack)
{
    if (typeof elem.children == 'object')
    {
        for (var i = 0; i < elem.children.count; i++)
        {
            var child = elem.children.getItem(i);
            callBack(child);
            forEachDescendant(child, callBack);
        }
    }
    elseif (typeof elem.child == 'object')
    {
        callBack(elem.child);
        forEachDescendant(elem.child, callBack);
    }
}

Now we can use this in the Grid's Loaded event. I'm just going to add the string "XX" to the end of all the textblocks:-

var hasLoaded = false;
functionOnLoaded(sender, eventArgs)
{
    if (hasLoaded == true)
        return;

    forEachDescendant(sender, function (elem)
    {
        if (typeof elem.Text == 'string')
        {
            elem.Text += 'XX';
        }
    });

    hasLoaded = true;
}

You'll not the hasLoaded protects the code from executing more than once. Sometimes you can get loaded events more often that you would expect.

Solution 2:

JavaScript has no access to your XAML, there's no way to manipulate you .NET objects from JavaScript.

This can be done with HTML because JavaScript has access to the HTML DOM of the page, but that's not the case with XAML object model, there's absolutely no connection, they run in very different contexts.

If it helps, the XAML does have access to the HTML model, so you could for instance call a JavaScript function from your XAML, but that also is a little tricky and is more a hack than a really solution, besides I'm not sure if that would solve your problem.

Solution 3:

I'm not sure what this Grid object is about, but try something like this:

functionfillDataArray(sender) {
    var textBlockArray = newArray(),i = 0,obj;
    while (sender[i]) {
        obj = sender[i];
        if (typeof obj=="TextBlock")
            textBlockArray.push(obj);
        i++;
    }
}

Show me this object's structure (like a print) and i can improve the code