These are chat archives for canjs/canjs

24th
Aug 2017
Nico R.
@nriesco
Aug 24 2017 13:01

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
Gregg Roemhildt
@roemhildtg
Aug 24 2017 13:14
Are you sure elements actually dispatch resize events? I thought that was only on the window object.
Nico R.
@nriesco
Aug 24 2017 13:15
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
Gregg Roemhildt
@roemhildtg
Aug 24 2017 13:17
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
Nico R.
@nriesco
Aug 24 2017 13:19
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
Nico R.
@nriesco
Aug 24 2017 13:25
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?
Gregg Roemhildt
@roemhildtg
Aug 24 2017 13:39
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
Matthew Phillips
@matthewp
Aug 24 2017 13:54
If it's a DoneJS 1.0 app then jquery is not included by default.
if you installed can-jquery that might be why.
Nico R.
@nriesco
Aug 24 2017 13:59
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
Matthew Phillips
@matthewp
Aug 24 2017 14:01
So if you are using that bootstrap datepicker, it probably is coming from there.
Nico R.
@nriesco
Aug 24 2017 14:01
@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?
Matthew Phillips
@matthewp
Aug 24 2017 14:04
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.
Nico R.
@nriesco
Aug 24 2017 14:06
thanks @matthewp
Matthew Phillips
@matthewp
Aug 24 2017 14:09
np!