Accessing variables across different scopes in Javascript & YUI 3

Question

I'm new to YUI 3 and YUI in general. I'm trying to pass data between classes and methods.

In this example I'm using the gallery-sm-treeview plugin to build a file tree. There's a class named TreeView to initialize and render the tree. There's another class named MenuBar where I want to access some of the plugin-specific methods through TreeView's getter method.

However, the variable var treeview inside the YUI().use() scope is of course not accessible from outside. How to do it?

YUI.add('treetool.TreeView', function(Y) {

  Y.treetool.TreeView = Class.extend({

    init : function(elementId) {

      YUI({
        gallery: 'gallery-2013.06.20-02-07'}).use('gallery-sm-treeview', function (Y) {

          // Create a new TreeView with a few nodes.
          var treeview = new Y.TreeView({

              // Tell the TreeView where to render itself.
              container: elementId,

              // Populate the treeview with some tree nodes. 
              nodes: [
                  {label: 'Node 1'},
                  {label: 'Node 2', children: [
                      {label: 'Child 1'},
              ]
          });

          // Render the treeview inside the #treeview element.
          treeview.render();

        });          
    },  

    getSomeData : function () {

      return treeview.getSelectedNodes();      

    }

  }); 

}, '0.0.1', {
  requires : [ 'jquery' ]
});

and

YUI.add('treetool.MenuBar', function(Y) {

  Y.treetool.MenuBar = Class.extend({

    init : function(treeObj) {

      var someData = treeObj.getSomeData();

    },  
  });

}, '0.0.1', {
  requires : [ 'jquery' ]
});

simple... define `treeview` in a scope where it would be available to `getSomeData`. `var treeview;` — Kevin B, Aug 01 '13 at 15:39
But it has to be wrapped into this YUI plugin section... You mean I have to expand this specific scope somehow? — frhd, Aug 01 '13 at 15:50
No, just make the treeview variable available to both `init` and `getSomeData`. `YUI.add('treetool.TreeView', function(Y) {var treeview;...` but don't forget to remove `var` from where it is now. — Kevin B, Aug 01 '13 at 15:51
Moving it up results in a not recognized constructor (new Y.TreeView). It only works within YUI({ gallery: 'gallery-2013.06.20-02-07'}).use('gallery-sm-treeview', function (Y) { ...} — frhd, Aug 01 '13 at 15:58
Okay, you didn't mention moving up the constructor as well, which wouldn't work. So yes, you are very right and I'm very thankful for your solution ;) — frhd, Aug 01 '13 at 16:03

score 0 · Accepted Answer · answered Aug 01 '13 at 16:12

0

It might not be the "best" way to do it, but one way would be to define the treeview variable in a scope that is available in both places.

YUI.add('treetool.TreeView', function(Y) {
    var treeview;
    //...

and

treeview = new Y.TreeView({ // removed "var "

answered Aug 01 '13 at 16:12

Kevin B

94,570
16
163
180

Thanks. This reminds me of the concept of class variables. Suffices me at the moment, but I wonder what the "best" way would be... – frhd Aug 01 '13 at 17:24
For example, what does `this` refer to in that structure? if you assigned something to an arbitrary property on `this`, would it be available in both places? I don't know because I haven't used YUI in a very long time. – Kevin B Aug 01 '13 at 17:50

Accessing variables across different scopes in Javascript & YUI 3

1 Answers1