Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile
Tags:

Y.on() vs Y.Node.on() API differences

Post Posted: Tue Jul 17, 2012 3:18 pm
+0-
Hi everyone,

I'm noticing weird behavior with the .on() event registration method. In particular, it's not consistent on setting the 'this' context on the callback, which is supposed to be the 3rd argument for on() according to the YUI and Node module API Docs.

http://yuilibrary.com/yui/docs/api/clas ... #method_on
http://yuilibrary.com/yui/docs/api/clas ... #method_on

and I have a sample code that reproduces the issue. Try running the following HTML code and 'it works' as is, but notice in the listenToWindow() that the 'this' is in the 4th argument. If you comment that line out and use the 'this' in the 3rd argument, then it wont call the recenterPanel() at all...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use('base', 'view', 'node', function (Y) {
Y.on('domready', function () {
    var childView1,
        parentView = Y.Base.create('ParentView', Y.View, [],
        {
            initializer: function () {
                // note how the 'this' value is the 3rd argument here
                Y.one('#bb').on('click', this.onShowPanelAction, this);
            },
            onShowPanelAction: function (e) {
                this.listenToWindow();
            },
            listenToWindow: function () {
                // why does the 'this' argument have to be put to the last argument?
                // usually it's the 3rd argument where the null in the line below
                this.resizeSub = Y.on('resize', this.recenterPanel, null, this);
                // If you try this line w/ the 'this' in the third argument, then the recenterPanel()
                // does not get invoked at all!
                //this.resizeSub = Y.on('resize', this.recenterPanel, this);
            },
            recenterPanel: function () {
                if (this.name === 'ChildView1') {
                    Y.one("#resizeResults").append('it works!');
                } else {
                    Y.one("#resizeResults").append('fail');
                }
            }
        },
        {});
    childView1 = Y.Base.create('ChildView1', parentView, [], {}, {});
    var cvInstance1 = new childView1();
});
});
</script>
</head>
<body>
click the button first to register the callback, then try to resize the browser
<input id="bb" type="button" value="pushFirstToListenToResize" />
<div id="resizeResults"></div>
</body></html>

Thanks.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 507
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Y.on() vs Y.Node.on() API differences

Post Posted: Tue Jul 17, 2012 10:06 pm
+0-
Yeah, this is a known issue, but it's basically a documentation issue. While it is noted in the documentation (http://yuilibrary.com/yui/docs/event/#e ... -signature), it's kind of buried, and the API docs aren't helpful because Y.on() (http://yuilibrary.com/yui/docs/api/clas ... #method_on) is massively overloaded, so the docs would need to show three different signatures.

Personally, I recommend not using Y.on() for anything but custom events, and even those sparingly if at all. As to a resolution, I'm not sure what the best approach would be. The Event docs are already lengthy, and the API docs could get really confusing with all the signatures. And removing functionality is out because that would break backward compatibility.

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile

Re: Y.on() vs Y.Node.on() API differences

Post Posted: Wed Jul 18, 2012 9:25 am
+0-
Hi Luke!

I pretty much use Y.on syntax only for custom events so I guess I'm good there. In this particular example, I wasn't sure of where to listen to the resize event so I must have used the Y instance to be the listener.

Is there a way to listen to the browser resize & scroll events without listening at the Y level?

Thanks.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 507
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Y.on() vs Y.Node.on() API differences

Post Posted: Wed Jul 18, 2012 10:06 am
+0-
True. For window events, use Y.on(['resize', 'scroll'], doTheThing, null, context); where null means window (actually, Y.config.win).

But be careful with these events. They can fire a lot, depending on the browser.

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile
Tags:

Re: Y.on() vs Y.Node.on() API differences

Post Posted: Wed Jul 18, 2012 10:25 am
+0-
I wanted to explain the need for listening to scroll/resize events and perhaps you can provide a better solution.

On a scroll/resize event, I center a Y.Panel using Y.Panel.centered(). When the panel is hidden/closed, I detach the event listeners and when a panel is shown/opened, then I attach the event listeners.

Is there a better solution to keeping a Y.Panel centered? It was the first thing I came up with, but haven't thought of anything better.

Thanks.

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 619
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile
Tags:

Re: Y.on() vs Y.Node.on() API differences

Post Posted: Wed Jul 18, 2012 11:32 am
+0-
Panel already has a utility for doing that: the "alignOn" attribute. You can set it to align itself on the scroll and resize events of the window by doing:
Code:
var panel = new Y.Panel({
  alignOn: [
    { node: 'win', eventName: 'resize' },
    { node: 'win', eventName: 'scroll' }
  ]
});

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile

Re: Y.on() vs Y.Node.on() API differences

Post Posted: Wed Jul 18, 2012 12:01 pm
+0-
Hey Juan :)

That's a nice tip! It works perfectly :)

Thanks.
Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group