1

I have a "listener" for a @track variable, that whenever it changes, i want to fire an event. So i have this piece of code:

  @track queryTerm = {
    value: "timeGridWeek"
  };

  connectedCallback() {
    var targetProxy = new Proxy(this.queryTerm, {
      set: function (target, key, value) {
        alert(`${key} set to ${value}`);
        target[key] = value;
        alert("33");
        const viewChangeEvent = new CustomEvent("viewchange", {
          detail: target[key]
        });
        alert("before dispatcher");
        // Fire the custom event
        this.dispatchEvent(viewChangeEvent);
        alert("after event dispatcehd");
        return true;
      }
    });
    alert("31");
    this.queryTerm = targetProxy;
  }

My problem is that in this.dispatchEvent(viewChangeEvent);, my code gets lost. The alert("after event dispatcehd"); never triggers. Anyone knows why this happens and a way to overcome this issue ?

The code that i use to catch the event on my Parent Component, as requested in the comments is:

cmp

<lightning:layoutItem>
                <c:fullCalendarJs onviewchange="{!c.onViewChangeHandler}"></c:fullCalendarJs>
            </lightning:layoutItem>

js

onViewChangeHandler : function(component, event, helper) {
        alert('Listen!!!');
    }
2
  • Can you post the code that where did you catch this event viewChangeEvent ? – Sahil Malhotra Apr 8 '20 at 10:41
  • Yes i will post it but this is not the problem. The problem is in this.dispatchEvent(viewChangeEvent); command because the alert after that does not run... – Giorgos Galaios Apr 8 '20 at 10:57
1

As you clarified your question this should fix the problem:

using a fat-arrow function in the set method of the proxy to retain the thiscontext

connectedCallback() {
    var targetProxy = new Proxy(this.queryTerm, {
        set: (target, key, value) => {
            alert(`${key} set to ${value}`);
            target[key] = value;
            alert('33');
            const viewChangeEvent = new CustomEvent('viewchange', {
                detail: target[key]
            });
            alert('before dispatcher');
            // Fire the custom event
            this.dispatchEvent(viewChangeEvent);
            alert('after event dispatcehd');
            return true;
        }
    });
    alert('31');
    this.queryTerm = targetProxy;
1
  • Thank you so much for your help, Christian! :)) – Giorgos Galaios Apr 8 '20 at 11:38
1

Can you please clarify, what you mean by "my code gets lost"? Is the "after event dispatched" alert triggering?

Expecting that the code is running through, the issue could maybe around event propagation. Depending on where the listener lives, you have to explicitly define that your event is allowed to bubble. You can try to use

new CustomEvent("viewchange", {
      detail: target[key],
      bubbles: true,
      composed: true
    });

Here is the corresponding documentation: Configure Event Propagation

Please have a look at the section bubbles: true and composed: true and also note the important statement!

5
  • Hi Christian and thank you for your response. Yes, the "after event dispatched" does not trigger, this is what i mean "my code gets lost". Sorry for not clarifying properly, i will edit it in the question as well. – Giorgos Galaios Apr 8 '20 at 11:07
  • Maybe the "this" context is wrong? Can you debug and see if "this" still references to your class? – Christian Menzinger Apr 8 '20 at 11:09
  • I use alert(this); and i get [Object][Object]. What could i put in order to understand where it references to? And if "this" context is wrong, which is what i also believe, is there a way to overcome this and put something else instead? – Giorgos Galaios Apr 8 '20 at 11:16
  • Add a breakpoint in the browser's developer tool - when you type "this" in the breakpoint context in the dev console, you should see your component class name. Just another idea: why not just use a setter method? – Christian Menzinger Apr 8 '20 at 11:28
  • Yes, indeed the this has value "dayGridMonth" and references to the proxy! – Giorgos Galaios Apr 8 '20 at 11:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.