CanJS and Steal

in CanJS • 1 year ago

When using CanJS and Steal, do I have steal jquery before stealing the Can components I want to use such as can/control and can/view/ejs?

Replies(32)

Curtis Cu..

Re: CanJS and Steal

1 year ago

No, each component of CanJS steals its own dependencies so jquery will be loaded eventually.

jQuery is the default library used, so all you have to do is:

steal('can/control', function(){
//awesomesauce
})

if you want to use one of the other libraries you need to set a global variable before you start stealing any files:

STEALDOJO = true
//or
STEALMOOTOOLS = true
//or
STEALYUI = true
//or
STEALZEPTO = true

thecounto..

Ok, that's what I thought. The reason I am asking is because I am seeing some weird behavior with regards to Steal. I have a main app file the loads some other CanJS widgets I've developed with the following steal usage:

steal({src: 'myapp/fixtures/fixtures.js', ignore: true});

steal('can/control', 'can/view/ejs',
'myapp/widgets/status_panel',
'myapp/widgets/scoreboard',
'myapp/widgets/cache_overview',
'myapp/resources/css/reset.css').
then('./dashboard.css', function($) {

Dashboard = can.Control({
init : function() {
}
});

new MyApp.StatusPanel('#statusPanel', {});
new MyApp.Scoreboard('#scoreboard', {});
new MyApp.CacheOverview('#cacheOverview', {});
});

Each of the widgets loads up nicely on its own, but when initiated from this Dashboard app which will drive everything, StatusPanel and Scoreboard load up fine, but CacheOverview throws the following errors:

Uncaught TypeError: Object [object Object] has no method 'progressbar'

For some reason the jQuery UI progress bar is not defined when it is being called even though its usage is wrapped in a then() that happens after I steal the progress bar. Here is the steal usage in the CacheOverview widget:

//steal({src: 'maypp/fixtures/fixtures.js', ignore: true});

steal('can/control', 'can/construct/proxy', 'can/view/ejs', 'maypp/models/cache_overview.js', './cache_overview.css').
then('maypp/lib/jqueryui/progressbar',
'maypp/lib/jquery.ba-dotimeout.min.js',
'maypp/lib/highcharts/js/highcharts.src.js',
'maypp/lib/jqueryui/lib/themes/base/jquery.ui.all.css').
then('maypp/lib/jqueryui/lib/themes/custom-theme/jquery.ui.all.css', function($) {

can.Control("MyApp.CacheOverview", {
defaults: {}
}, {

// Initialize the Status Panel
init : function() {
var self = this;

can.view('//myapp/widgets/cache_overview/cache_overview.ejs', {
overview: MyApp.Models.CacheOverview.findOne({id: 'CACHE_OVERVIEW'}, function(ov) {
self.cacheOverview = ov;
})
}).then(function(frag) {
self.element.append(frag);
self._initProgressBars(self.cacheOverview);
});
},

_initProgressBars: function(cacheData) {

this.dirtyMeter = this.element.find('.dirtyMeter').progressbar({
value: cacheData.dirtyStats.getPercentDirty()
}).height(50);
}
});
});

Am I doing something out of order with how I am stealing things?

Sorry for the long post.

thecounto..

Re: CanJS and Steal

1 year ago

It seems to be related to using:

this.element.find

This works:

$( ".dirtyMeter" ).progressbar( { value: 50 } );

This throws the error:

this.element.find( ".dirtyMeter" ).progressbar( { value: 50 } );

Curtis Cu..

Re: CanJS and Steal

1 year ago

this.element is just can.$ which is a wrapper for selecting a DOM node. In the case of jQuery, can.$ === $

So if this.element.find throws an error, it's because '.dirtyMeter' is not in this.element. What is the output of console.log(this.element.find('.dirtyMeter'))?

thecounto..

Re: CanJS and Steal

1 year ago

Here is the output:

[

<div class="dirtyMeter"></div>

]

So it finds the element, but if I do a:

console.dir( this.element.find('.dirtyMeter') );

Results:

jQuery.fn.jQuery.init[1]
1. 0: HTMLDivElement
2. context: HTMLDocument
3. length: 1
4. prevObject: jQuery.fn.jQuery.init[1]
5. selector: "#cacheOverview .dirtyMeter"
6. __proto__: Object[0]

When I expand __proto__, there is no progressbar function.

But if I do the following, I do see the progressbar function listed under the __proto__

console.dir( $('.dirtyMeter') );

thecounto..

Re: CanJS and Steal

1 year ago

If I do the following it works:

$( this.element.find( '.dirtyMeter' ) ).progressbar( { value: 35 } );

So wrapping in with jQuery makes it work...

Justin Me..

Re: CanJS and Steal

1 year ago

which version are you using?

Justin Me..

Re: CanJS and Steal

1 year ago

what happens if you remove the prototype being set at:

https://github.com/bitovi/canjs/blob/master/util/jquery/jquery.js#L26

it shouldn't be there anyway

Justin Me..

Re: CanJS and Steal

1 year ago

this is probably a bug ... can you make a small test to show it barfing and submit a pull request and we will fix it? Thanks!

amcdaniel2

Re: CanJS and Steal

1 year ago

Can you show the code for progressbar?

Also, I removed the prototype pointer from the jquery file if you get latest..

Follow me on Twitter @js_consultant

thecounto..

Re: CanJS and Steal

1 year ago

Using the latest. No change.

As for progressbar, I am using daff's fork of jQuery UI that uses Steal

https://github.com/daffl/jqueryui/blob/master/progressbar/progressbar.js

Perhaps the problem is this was designed to work with JMVC and not Can?

thecounto..

Re: CanJS and Steal

1 year ago

It's weird. Sometimes it works. Seems like it could be a timing thing as to when stuff is loaded. Which is why I originally was questioning steal.

thecounto..

Re: CanJS and Steal

1 year ago

Now this make no sense to me at all. If I do:

console.dir(this.element);
this.element.progressbar({value: 45});

The __proto__ of this.element contains the progressbar function, yet the next line which tries to invoke the function throws the error

Uncaught TypeError: Object [object Object] has no method 'progressbar'

Baffling...

thecounto..

Re: CanJS and Steal

1 year ago

Ok. I've done some more digging and here is something interesting I have uncovered.

I have a main app file (app.js) which steals some CanJS components as well as a few other widgets I created using CanJS and Steal.

If two of those widgets both steal the same jQuery plugin (ie. jquery.corner.js), things break down.

thecounto..

Re: CanJS and Steal

1 year ago

Ok. So I created a small CanJS app that exhibits a similar issue. If you load it by bringing up canbaseball.html you will be able to see in the console that you can an error. To get it to load without error, open up either widget (widgets/a/a.js or widgets/b/b.js) and remove the attempt to steal jquery.corner from either widget.

If you then reload canbaseball.html, you won't get an error in the console.

For some reason, trying to steal the same jquery plugin from more than one widget where both widgets are steal'ed from a higher level file, something seems to break.

I put the sample app on github:

https://github.com/thecountofzero/canbaseball

daff

Re: CanJS and Steal

1 year ago

I just confirmed it. There seems to be a problem with Steal and jQuery plugins that are loaded multiple files.

asavoy

Re: CanJS and Steal

1 year ago

Doesn't the jQuery plugin code need to be wrapped with steal()?

steal('jquery', function($) {
// plugin code goes here
});

Not using CanJS yet, but we're using the latest steal and this pattern seems to be necessary or things may execute out of order.

Correct me if I am wrong?

Justin Me..

Re: CanJS and Steal

1 year ago

I get an error saying Team is not defined. There is a problem with the latest steal. Are you using the latest steal, is this the error you see? My error never goes away

Please try to be extremely specific about these types of things. I fixed the steal issue, but I doubt it's your problem. Do you see it in FF?

I'm not going to have time to look at this again for a while.

thecounto..

Re: CanJS and Steal

1 year ago

Justin,

Yes, that was the error I was getting with the then latest version of Steal. With the newest version of steal I am no longer getting the error with the canbaseball app.

That error is not the original error I was getting that prompted me to start this thread. But after much investigation of my initial issue, I boiled the root cause down to loading the same jquery plugin from two different widgets in the same app. That's why I generated the sample app to demo the bug.

But you are right. This does not fix my original issue. It is still breaking as a result of having the same plugin steal'ed from two widgets.

I am seeing the same behavior in Firefox and Chrome.

In the meantime I can steal the plugin from the main app file that steals the widgets, but ultimately i'd like it to be stolen from the widgets to keep the dependencies where they belong.

Do you think this is a Steal issue?

I can upload my app to github if that allows you to more easily see the issue and/or debug.

Thanks!

thecounto..

Re: CanJS and Steal

1 year ago

I know you said you weren't gonna have a chance to look at this for a while, but I was wondering if you had some idea of when this issue will be looked at and addressed.

asavoy

Re: CanJS and Steal

1 year ago

@thecountofzero

I'm curious about this issue so I tried canbaseball in my sandbox (latest DoneJS, which is steal + canjs installed as per canjs.us).

So as I was saying earlier, wrapping the contents of jquery.corner.js with: steal('jquery', function(jQuery) { ....... }); does fix the premature evaluation of that script. Whether it's "correct" or not, I've not received an answer on... but it might at least get you going for now.

FWIW I found I have to do this in any non-trivial JavascriptMVC 3.2 apps. But this explicit structure is a good thing; consider when you have jQuery plugins that depend on other jQuery plugins (e.g. jQuery UI with custom themes and UI plugins) - only load the parts of jQuery UI that you need!

retro

Re: CanJS and Steal

1 year ago

When I have to use some jQuery plugin I usually try not to modify it's code to avoid potential problems with upgrading. What I do instead is something like this:

Create corner folder
Put jquery.corner.js in that folder
In that folder create corner.js file
In corner.js file put: steal('jquery').then('jquery.corner.js')

This allows me to steal it just with steal('app_folder/corner') and if I want to update jquery.corner.js file I don't have to care about wrapping it with the steal statement. I didn't run in any problems with this.

As an extra bonus, corner.js file can steal any css files that come with the plugin too, and your controllers don't have to know anything about jquery.corner.js implementation.

thecounto..

Re: CanJS and Steal

1 year ago

I like Retro's approach since it's cleaner and as he mentioned, upgrading the plugin is just a drop in. As a matter of fact that is how the version of jQueryUI that I am using is.

https://github.com/daffl/jqueryui/blob/master/progressbar/progressbar.js

However, I tried this approach with jquery.corner and it did not resolve the issue. Two facts, I am not even using jquery.corner. It is just a plugin I had lying around to use as an example. It doesn't matter what jQuery plugin is used. In fact, the file can be empty and the error occurs.

falzhobel

Re: CanJS and Steal

1 year ago

So is CanJS now working correctly while used with Steal? I'm starting a new project and want to start converting my jQueryMX stuff to CanJS :)

thecounto..

Re: CanJS and Steal

1 year ago

I don't believe it is a CanJS issue, but rather just an issue with Steal.

falzhobel

Re: CanJS and Steal

1 year ago

So for now we can't really use CanJS with Steal?

thecounto..

Re: CanJS and Steal

1 year ago

I am definitely not saying that. You can, but you might run into this issue. In the meantime I can just move the stealing of the jquery plugin up to the main app file to get around it.

Gotta wait till we hear more from the Bitovi experts before jumping to any conclusions.

All I can say is that I've run into what seems to be an issue with Steal.

thecounto..