I have a component that looks like this:
export default Component.extend({
tag: 'my-tag',
ViewModel,
view,
events: {
inserted: function() {
console.log('this works!');
}
}
});and will show 'this works!' in the console. I tried to guess other events such as 'resize', 'onresize', etc.. but none of them workded. How can I know for sure what are the possible events that will be triggered? somehow I know 'inserted' is available, but what about the rest?
Thanks
BTW: I’m trying to detect an element resize event (a div for example). A Window resize won’t work because I need the real width of the element that depends on several show/hidden blocks
Are you sure elements actually dispatch resize events? I thought that was only on the window object.
I don’t know who triggers the “inserted” event, nor what other events could be triggered.
I can trigger a click event, that works
maybe the approach is totally wrong, but still there must be a list of events that can be used there
I just found “removed” here https://canjs.com/doc/can-component.prototype.events.html
Yep, I was just going to link that page. I think for the most part, that events block is just for
inserted removed and viewmodel listeners. Like {viewModel} propertyName to listen for when propertyName changes
I think I might have an idea..
ok this works
export default Component.extend({
tag: 'my-tag',
ViewModel,
view,
events: {
inserted: function(el) {
$(window).on('resize', function() {
console.log('this works too!!!');
});
}
}
});
thanks @roemhildtg
one question thought...
the
$(window)… part.. is that jQuery? this is a donejs project and I never imported jQuery… but it works, weird isn’t it?
jQuery gets imported by some package. I think can-connect might import it. You can
npm ls jquery to see which one is requiring it I think
If it's a DoneJS 1.0 app then jquery is not included by default.
if you installed can-jquery that might be why.
thanks again @roemhildtg
npm ls jquery shows this (that explains it):
├─┬ bootstrap-datepicker@1.6.4
│ └── jquery@3.2.1
├─┬ documentjs@0.5.0
│ └── jquery@1.11.3
└─┬ funcunit@3.3.0
└── jquery@1.11.0
So if you are using that bootstrap datepicker, it probably is coming from there.
@matthewp I don’t understand why is jquery available in this case. If I don’t use bootstrap-datepicker then jquery won’t be available at all? if it is imported using progressive loading will it still be available even if that module is not yet imported?
I guess the correct way to use jquery is to import it in the project and don’t rely on other components importing it.. what brings the next question.. if I import version 2 and bootstrap-datepicker is importing version 3, then what version will be really available?
That's right, if you don't use something that uses jQuery then it won't be available on the window.
And yeah, if you have a conflict between jQuery and bootstrap-datepicker's jQuery then you'll wind up loading 2 versions, which you probably don't want.
It's always a good idea to be careful about dependencies and not loading too many copies of some library.
thanks @matthewp
np!