I'm trying to prototype using YUI3 on an existing website that already makes extensive usage of YUI 2.6. I'm running into some problems with fundamental brokenness in YUI3 that seems too broken to be attributable to the release being a preview. Can anyone tell me if they're having similar problems and if not, speculate as to what might be broken in my environment? I'm developing on OS X, FF 3.0.5, Firebug 1.2.1. I'm a relative JS noob, so comments/suggestions on how to clean up my code would be most appreciated. My setup is as follows:
I'm especially stuck on the second problem as I can't find a workaround... Thoughts?
First, I've included YUI in the header of my page:
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0pr2/build/yui/yui-debug.js&3.0.0pr2/build/oop/oop-debug.js&3.0.0pr2/build/event/event-debug.js&3.0.0pr2/build/dom/dom-debug.js&3.0.0pr2/build/node/node-debug.js"></script>
I attempted to instantiate YUI on an as-needed basis as shown in the docs (i.e. YUI.use('node', function(Y) { ... })), however that just didn't seem to work for me at all (basic methods like ".get(<String>)" just weren't there), so I made a global YUI object as follows:
<script type="text/javascript">
myYUI3 = YUI({debug: true, filter: 'debug'});
myYUI3.use('console',function(Y) { });
</script>
Then, in a .js file I include in the page, I use the object as follows:
myYUI3.use('io-base','io-form',function(Y) {
//Code here
};
I noticed a lot of weird behavior, so I investigated on the Firebug console. Among other things, I found:
-query() selectors are not scoped appropriately. For example,
tmp = Y.get('#compose_pane'); //tmp is now a DIV that contains a form
myForm = tmp.query(".compose_form"); //WRONG!
//myForm is another FORM element of the same CSS class but not the one within the tmp element!
-No attributes are available on YUI Nodes
myForm = Y.get('form.compose_form'); //A form element I'm going to post use io-form
cfg = {
form: { id: myForm },... //Rest skipped for clarity
};
Y.io(url,cfg); //ERROR: io method calls myForm.elements which is undefined
Thanks,
Logan Bowers