how can I get var in the script function?

Question

I want to get in js function value. how can i get them?

I use html and javascript and alloy-ui

I test in chrome developer console. staY.diagrambuilder or staY.Y or make function name.

<script>
 var staY = YUI().use(
    'aui-diagram-builder',

    function (Y) {
var diagrambuilder = new Y.DiagramBuilder({
            availableFields: availableFields,
            boundingBox: '#diagrambuilderBB',
            srcNode: '#diagrambuilderBB',
            fields: []
        });
console.log(diagrambuilder); //i want to access variable out of this script
});
</script>

how can i get diagrambuilder variable in chrome developer console?

Answer 1

<script>
var diagrambuilder = null;
var staY = YUI().use(
    'aui-diagram-builder',

    function (Y) {
diagrambuilder = new Y.DiagramBuilder({
            availableFields: availableFields,
            boundingBox: '#diagrambuilderBB',
            srcNode: '#diagrambuilderBB',
            fields: []
        });
console.log(diagrambuilder); //i want to access variable out of this script

diagramInitialized();

});

function diagramInitialized() {
    console.log('If you are seeing this thenm diagrambuilder is available in global scope'); //it is accessible now;
    console.log(diagrambuilder); //it is accessible now;
}
</script>

Is this what you want? @user9041996

Answer 2

You only have access to the diagrambuilder inside the callback function that you pass to YUI.use.

<script>
  var staY = YUI().use(
    'aui-diagram-builder',

    function (Y) {
      var diagrambuilder = new Y.DiagramBuilder({
        availableFields: availableFields,
        boundingBox: '#diagrambuilderBB',
        srcNode: '#diagrambuilderBB',
        fields: []
      });

      console.log(diagrambuilder);
      // use diagrambuilder here
    });
  );
</script>

If you don't want to put all of your code inside of the YUI.use function, you could make your own function that takes in diagrambuilder.

<script>
  var buildDiagram = function(diagrambuilder) {
    console.log(diagrambuilder);
    // use diagrambuilder here
  }

  var staY = YUI().use(
    'aui-diagram-builder',

    function (Y) {
      var diagrambuilder = new Y.DiagramBuilder({
        availableFields: availableFields,
        boundingBox: '#diagrambuilderBB',
        srcNode: '#diagrambuilderBB',
        fields: []
      });

      buildDiagram(diagrambuilder);
    });
  );
</script>

Another option you have is to create a function that takes in Y:

<script>
  var buildDiagram = function(Y) {
    var diagrambuilder = new Y.DiagramBuilder({
      availableFields: availableFields,
      boundingBox: '#diagrambuilderBB',
      srcNode: '#diagrambuilderBB',
      fields: []
    });

    console.log(diagrambuilder);
    // use diagrambuilder here
  }

  var staY = YUI().use('aui-diagram-builder', buildDiagram);
</script>

All of these do exactly the same thing, but the place that the code is written varies. Either way, the point is that you only have access to Y.DiagramBuilder inside the YUI().use() callback function.

You can't do something like this:

<script>
  var staY = YUI().use(
    'aui-diagram-builder',

    function (Y) {
      var diagrambuilder = new Y.DiagramBuilder({
        availableFields: availableFields,
        boundingBox: '#diagrambuilderBB',
        srcNode: '#diagrambuilderBB',
        fields: []
      });
    });
  );

  console.log(diagrambuilder); // undefined
</script>

And you can't do this:

<script>
  var diagrambuilder;

  var staY = YUI().use(
    'aui-diagram-builder',

    function (Y) {
     diagrambuilder = new Y.DiagramBuilder({
        availableFields: availableFields,
        boundingBox: '#diagrambuilderBB',
        srcNode: '#diagrambuilderBB',
        fields: []
      });
    });
  );

  // This will most likely be null, as it takes time to load
  // the aui-diagram-builder library, and the code is asynchronous.
  // If this does happen to work for you, know that you're getting lucky
  // and it will fail at some point. This is not something you should do,
  // but I think it's what you're hoping for, so I'm pointing it out.
  console.log(diagrambuilder);
</script>