when can i set WinJS.UI. setoptions?

Question

I have one custom control . I want to set the options in script side before the control rendered how can i pass the options ?

i want to pass the options through script in the same html page.

<script type="text/javascript">

        $(document).ready(function () 
{

            var myDiv = document.getElementById("svgChart").winControl;





            WinJS.UI.setOptions(myDiv, {
                seriesList: [{
                    label: "s1",
                    legendEntry: true,
                    data: { x: [1, 2, 3, 4, 5], y: [-5, -3, 1, 7, 2] }
                }, {
                    label: "s2",
                    legendEntry: true,
                    data: { x: [1, 2, 3, 4, 5], y: [-2, -6, 2, 4, 3] }
                }, {
                    label: "s3",
                    legendEntry: true,
                    data: { x: [1, 2, 3, 4, 5], y: [-3, -5, 3, 2, 5] }
                }]
            });
        });

    </script>

but wincontrol returns undefined element ? when can i set the options before the control created ?

Answer 1

When using a control with the WinJS contract, there are three ways to create a control instance:

1. By calling the constructor from script. E.g. var myControl = new Mynamespace.MyControl(element, options)
2. By Calling WinJS.UI.processAll on the DOM tree.This is called for you by the default templates when creating a new project in VS
3. By Calling WinJS.UI.process on the specific DOM element

When using 1, you can clearly pass your options however you want to.

However, when using the other two, you can pass options to the control declaratively:

<div data-win-control="Mynamespace.MyControl"
     data-win-options="{ aProp: 'val', bProb: 3.14}">
   <!-- your other content --->
</div>

This will be the options parameter to your controls constructor. If you want all those properties applied to your instance, you can use WinJS.UI.setOptions(instance, optionsObject) to set them.

In your specific case, it looks like you already have some markup, and a control -- you just need to wait till after the control has been created to set options on it.