Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Problem widgetrendering in binder #642

Closed
ItsAsbreuk opened this Issue · 25 comments

2 participants

@ItsAsbreuk

Consider this situation:

When declaring the code inside the handlebarview, both console and datatable are rendered well:

<div id="{{mojit_view_id}}">
    <div id="example"></div>
</div>
YUI().use('datatable', 'console-filters', function(Y) {
     Y.one('body').addClass('yui3-skin-sam');
     new Y.Console().render();
     var data = [
        { id: "ga-3475", name: "gadget",   price: "$6.99", cost: "$5.99" },
        { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
        { id: "wi-0650", name: "widget",   price: "$4.25", cost: "$3.75" }
    ];
    var table = new Y.DataTable({
        columns: ["id", "name", "price"],
        data: data
    });
    table.render("#example");
});

However,
When declaring the code inside the binder, both console and datatable are being rendered (can see in the dom), but they are empty and without css:

YUI.add('MyMojitBinderIndex', function(Y, NAME) {
    Y.namespace('mojito.binders')[NAME] = {
        init: function(mojitProxy) {
            this.mojitProxy = mojitProxy;
        },
        bind: function(node) {
             var instance = this;
             instance.node = node;
             Y.one('body').addClass('yui3-skin-sam');
             new Y.Console().render();
             var data = [
                { id: "ga-3475", name: "gadget",   price: "$6.99", cost: "$5.99" },
                { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
                { id: "wi-0650", name: "widget",   price: "$4.25", cost: "$3.75" }
            ];
            var table = new Y.DataTable({
                columns: ["id", "name", "price"],
                data: data
            });
            table.render("#example");
        }
    };
}, '0.0.1', {requires: ['mojito-client', 'datatable', 'console-filters']});

Very strange. Again: I can see the widgets have manipulated the dom. Also, in firebug I can see there isn't a javascripterror thrown. On the other hand, a custom Y.View is rendered well inside the binder...

@caridy
Owner

Make sure you're using the correct value for "dependencyCalculations", I will recommend to use "precomputed+ondemand", or just "ondemand" if you plan to use Y.use at any given time in your code. More details here:

http://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_configuring.html

Note, in 0.5.0pr2 this configuration is deprecated, and instead, mojito will support "Y.use" without special configurations.

@ItsAsbreuk

Hi Caridy,

Well, it's getting even better now (or actually worse..)

First: I'm glad to know this. I had other failures where missing libraries were the issue. So, these problems are solved (Yes!). But notice that in those cases firebug gave me an error of instances that were not available.

Second: When I include "dependencyCalculations": "precomputed+ondemand", the problem described above remains AND also occurs when the code is declared inside the handlebarview. So now it doesn't render well neither in the binder, nor in the view.

This is what is rendered:
<div id="example"><div id="yui_3_7_3_1_1350585334339_15" class="yui3-widget yui3-datatable"><div id="yui_3_7_3_1_1350585334339_17" class="yui3-datatable-content"></div></div></div>

So you see: Y.DataTable gets started rendering. But no content...

I thought I finally understood YUI well, but I'm totally lost now...

Marco.

@caridy
Owner

Well, we will need a test-case for this. Can you provide a very simple app so we can look at it?

@caridy
Owner

Also, will be interesting to see if this is already solved with 0.5.0pr2

@ItsAsbreuk

Caridy,

I've stripped it down to a simple project. Problem still remains.
You can see it at: https://github.com/ItsAsbreuk/test-mojito-datatable

These scenario's are tested by myself:
1) dependencyCalculations not defined:
--> binder: Y.DataTable does render, but no innercontent. No errormessages
--> view: Y.DataTable renders OK

2) "dependencyCalculations": "precomputed+ondemand"
--> binder: Y.DataTable does render, but no innercontent. No errormessages
--> view: Y.DataTable does render, but no innercontent. No errormessages

3) "dependencyCalculations": "ondemand"
--> binder: Y.DataTable does render, but no innercontent. No errormessages
--> view: Y.DataTable does render, but no innercontent. No errormessages

4) "dependencyCalculations": "precomputed"
--> binder: Y.DataTable does not render. No errormessages
--> view: Y.DataTable renders OK

How can I upgrade to Mojito 0.5.0pr2 ??
When I do "npm update mojito -g" it won't go higher then 0.4.7 (that's where I suffered this issue)

Marco.

@ItsAsbreuk

Well, I found out how to install Mojito 0.5.0pr2 (remember it being installed with speciific version during the YUI Open Hours :))

Anyway: Mojito 0.5.0pr2 doesn't start on my system:

/usr/lib/node_modules/mojito/lib/mojito.js:282
singleton_dispatcher = Y.mojito.Dispatcher.init(
TypeError: Cannot call method 'init' of undefined

So I had to reinstall 0.4.7. agian.

@ItsAsbreuk

I'm out now (it's 11:55 pm over here)...

@caridy
Owner

Read:
https://github.com/yahoo/mojito/wiki/ReleaseNotes0_5_0pr1
https://github.com/yahoo/mojito/wiki/ReleaseNotes0_5_0pr2

that will guide you through the changes to get that working on pr2

@ItsAsbreuk

Caridy,

Well, that are a bunch of changes I have to make to my projects ;(

But even this small project doesn't start: same error occurs.
I've search out and found out that application.json causes my startup error in 0.5.0pr2:

Startup fails within application.json:
"yui": {
"config": {
...
"combine": false,
"base": "http://yui.yahooapis.com/3.7.3/build/",
...
}
},

OR

"yui": {
"config": {
...
"combine": true,
"comboBase": "http://yui.yahooapis.com/combo?",
"root": "3.7.3/build/",
...
}
},

Removing the base ref. and use combine=false --> Mojito will start.
Removing the comboBase ref. and use combine=true --> Mojito will start.

However: my declared YUI-instances won't work in those cases.

I quess it's another bug in 0.5.0pr2

Marco.

@caridy
Owner

Marco, yes, using base to try to use a different version of YUI will not work, we have other ideas around base. I will try to take a look at your project soon.

@ItsAsbreuk

Caridy,

base doesn't only specify the version, but also the location. I hope there will be a way to specify the location, for I'm serving yui-modules through ssl from my own server. BTW, because its a parameter within the yui-object, it sounds weird to me to give it another meaning.

Mojito has great posibilities, but I feel a bit blinded getting it to master ;)
As soon as I get more experienced, I'll dive into the source. Perhaps I can make my contributions one day.

@caridy
Owner

@ItsAsbreuk this is partially supported in develop-perf branch and PR656, and we definitely one to support this use case. Keep in mind that Mojito is set to build offline html5 apps, which represent the same use case, using YUI from a local repo rather than CDN, etc.

In PR2, all modules (yui and app) are served from a local combo by default (Mojito Combo), so you don't really need to worry about base. In 0.5, that will change a little bit, but you can still use that option, or any configuration you want.

BTW, I will be talking about this in YUIConf :)

@ItsAsbreuk

I would like to visit the YUIConf some day, but at the moment cannot afford to cross the ocean... I'm eager to look at the recordings. Perhaps you're in to organize a hangout were Mojito developers can discuss any questions they have. Just like Dav does next Friday.

About the ticket: did you find time to take look at the problem?

Marco.

@caridy
Owner

@ItsAsbreuk I forked your demo, and here is the working copy using develop-perf branch:

caridy/test-mojito-datatable@c824081

I'm not using a custom YUI base since that version already uses 3.7.3, but keep in mind that you can still customize this by using a custom setting for the runtime:client.

In my fork, I can see the datatable working, with 3 columns, and 3 rows. I enabled fetchCSS to be able to get the styles for it.

Is this what you need?

@ItsAsbreuk

Caridy, thanks for your response.

But I'm really sorry...
Just doesn't work here. I don't understand what's different in your situation.

You changed the controller.server.js to work with Mojito0.5.0pr2, so I installed that version.
Now, on the client, no YUI is loaded --> the code fails right away when calling Y.one('body').

So, I downgraded Mojoto0.4.8 with your new code (had to make changes to controller.server.js, to call the Model without .get()) --> now YUI is loaded, but I suffer the bug as mentioned before. The errorcode is:
Y.Intl.get('datatable-message'))); <-- Y.Intl.get is not a function.
Seems to mee Y.Intl is not loaded.

What am I doing different? In you fork you see it work you say. Is that on the client side? Or are you running it on a machines that already has some modules loaded (don't know if that is possible)?

Marco.

@ItsAsbreuk

Well, a small correction: I did make it work, but still there is something not right.

I made it work when the datatable is declared in the Binder. This is what I needed, so I'm happy with this. Only when using Mojito0.4.8

On the other hand: there are strange still issues:

Mojito0.4.8, datatable declared in binder --> works
Mojito0.4.8, datatable declared in view (using YUI().use(datatable')--> fails: Y.Intl.get('datatable-message'))); <-- Y.Intl.get is not a function.
Mojito0.5.0pr2: nothing works for there is nu YUI on the client

This all using your last configuration (with only adjustments to controller.server.js -calling Model- and switching file where datatable is declared)

So, I can get along, but some bugs remain.

Marco.

@ItsAsbreuk

Caridy,

I found out his (version 0.5.0pr2):
Within application.json, if I define a section "settings": [ "runtime:client"] with a yui-object, than the base-location will be used by yui on the client in the html-definition YUI.applyConfig(). BUT on the client, the same config is used within the definition of window.YMojito(). This does not work, because all mojito stuff and assets should be downloaded from the server were Mojito is running. Now it tries to load http://yui.yahooapis.com/3.7.3/build/mojito-client/mojito-client-min.js. So all gets stuck.

There should be a distinguish between the yui-config of YUI.applyConfig() and window.YMojito()

Please help me out, I really would like to get it work on 0.5.0pr2

Regards,
Marco.

@caridy
Owner

Yes, you're running on the bleeding edge, that's why many of these problems are happening. We are working toward the final 0.5GA but for now, you should probably try pr3:

https://github.com/yahoo/mojito/wiki/ReleaseNotes0_5_0pr3

@ItsAsbreuk

Yeah, I'm sorry.
I should more respect it rather then pushing...
You advised me using 0.5.0pr2 though ;)
I'm glad you are aware and working on it. Will try pr3 in the mean time.

Thx,
Marco.

@ItsAsbreuk

By the way, I'm learning more and more features of Mojito and I'm really impressed!
It offers huge possibilities. I'm thankful I can make use of it.

Marco.

@ItsAsbreuk

Caridy, just to let you know:

I can't get it work with 0.5.0pr3 either.
So, the only configuration that works is the one you provided me. But it will throw me back to YUI3.5.1 (which is too bad when you want to use most of DataTable and Scrollviews new features)

So please take care of the possibility for using different YUI-versions on both client and server YUI before releasing 0.5GA, will you? But thats for later: first good luck at the YUI-conf!

Kind regards,
Marco.

@caridy
Owner

yes, it is on the table, and I will try to get it in.

@caridy
Owner

Here is the PR #721 to address this, no promises though.

@caridy
Owner

@ItsAsbreuk can we close this?

@ItsAsbreuk

Yeah, sorry.

closed!

@ItsAsbreuk ItsAsbreuk closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.