support for evaluating behavior scoped arguments about binding HOT 10 CLOSED

@jdanyow Can you investigate what it would take to do something like this? I think we might have another issue related to that, so search for that and see if their scenarios align.

See if we can come up with a way to enable this.

from binding.

possibly related to #50

from binding.

@stoffeastrom Here's an idea I have. Let me know if this would work.

What if we allow you to pass anything you want to your own method via call. But, similar to .delegate and .trigger, we set up the special $event value. The creator of the custom attribute could then call your function, passing it an event args that would become the $event in the consumer's method. Does that make sense?

So, the consumer would write this:

<div oribella-tap="end.call: onTap($event,data,contact);"></div>

And the attribute would do this:

export class OribellaTap {
  doSomething(){
    var eventArgs = {}; //something interesting here
    this.end(eventArgs);
  }
}

The "eventArgs" object becomes the $event parameter in the method. Would that work?

from binding.

It sounds like it in theory :).

So I guess that I could add whatever property on the eventArgs property I want to expose. So actually it would be

<div oribella-tap="end.call: onTap($event ,contact);"></div>

and I add

var eventArgs = {
  event: event,
  data: data
}

That should work. So we have a common way of exposing behavior scoped things in the eventArgs object :)

from binding.

Yes, that's my idea. Then this would also model the way DOM events works as well.

from binding.

I believe this is a breaking change...

My custom element's .call bindables all stopped being able to pass parameters when updating and I think it is because of this.

Is there somewhere I can go to see how to fix them? In particular, what do I need to do to make them work now?

Previously I did this:

app.html

<custom-element callback.call="myFunction()"></custom-element>

app.js

export class App {
    myFunction(param) {
        console.log(param);
    }
}

custom-element.js

export class CustomElement {
    @bindable callback;
    someMethod() {
        callback("foo");
    }
}

Previously, the above code would log "foo". Now it logs "undefined".

from binding.

It appears (correct me if I am wrong) that app.js from above needs to change to:

export class App {
    myFunction() {
        console.log(this.$event);
    }
}

If this is correct, then I would like to express my concern with this change. The first problem I see with this change is that the custom-element is modifying my view-model directly, not just through the bound properties. In particular, it is setting $event on my view-model. This is even more problematic if you want to use something like TypeScript for static typing because you are now stuck working with $event as any since you may have multiple callbacks in place, which would prevent you from statically typing $event on your view-model.

Secondly is discoverability. Previously, I could define my custom-element like so:

export class CustomElement {
    @bindable callback: (param: string) => void;
    someMethod() {
        callback("foo");
    }
}

This would allow the reader to easily find out that the callback they provide must be a function that takes a string. Also, if I were using TypeScript, I would be forced to match that signature while authoring CustomElement. This is particularly important if I am firing the callback from multiple locations in my source code.

In the new system, if I am understanding it correctly, we have lost not only discoverability of what exactly will be provided in the callback but we are also munging other people's objects which, IMO, is a bad practice.

from binding.

Your binding expression should pass $event rather than use this. Also, the modification of the view model is a temporary hack until after we make some more fundamental changes to the binding system, which will correct this and other issues.

If you want discoverability, you should define the shape of the event object that the custom element will pass.

from binding.

@EisenbergEffect Can you provide some clarity on what you mean by

Your binding expression should pass $event rather than use this.

I don't know what that statement translates to in code. It seems that everyone else "gets it" so I am guessing my misunderstanding is due to my newbieness in JavaScript.

from binding.

callback.call="myFunction($event)"

(Im on mobile- unable to format the code properly)

from binding.