Function Reference does not work anymore

Hello.

I’ve met an issue which I believe you can help me to address.
A some time ago I have created a simple custom attribute to use sortable js https://github.com/RubaXa/Sortable

Here is it. Imports, constructor and some stuff has been omitted.

export class SortableCustomAttribute {
  @bindable moveEnd;
  @bindable disabled = false;
  @bindable handle = null;

  ...

  attached() {
    let self = this;
    let options = {
      onEnd: function(evt) {
        if (self.moveEnd) {
          self.moveEnd({evt: evt});
        }
      }
    };

    if (this.handle) {
      options.handle = this.handle;
    }

    this.inst = Sortable.create(this.element, options);
  }

}

As you can see, when attached() is called it initiates Sortable with a few options.
And as you may guess - moveEnd property is expected to be a function reference.
Here is the part of the HTML, were this attribute used:

<div class="box-body" sortable="moveEnd.call: sortCb(evt); disabled.bind: dragDisabled; handle: .box-header">
   <div class="row" repeat.for="stepInt of viewSteps">
         <compose view="./step.html" view-model.bind="stepInt"
                                         class="${dragDisabled ? '': 'draggable-box'}"></compose>
   </div>
                            
</div>

And all this stuff worked as expected, but for some reason moveEnd is no longer populated with a function reference. While sortCb() method is still exist in the VM,

...
  sortCb(evt) {
    console.log('move occurred', evt);
    arrayMove.mut(this.steps, evt.oldIndex, evt.newIndex);
  }
...

a moveEnd property is always null.

Here is this method in view-spy output of bindingContext:
see next post

Strange thing here is that all methods in __proto__ instead of prototype.

My platform is windows 10, and I am using webpack with babel.

What I am missing? Is there any way to address this issue?

I will be grateful for any ideas.

Thanks in advance.

view-spy output

1 Like

If that has been your html, then I think something were wrong in the past when it was working. Because what it is expected to be move-end.call not moveEnd.call

Can you check to see if it used to work ?

Hello @bigopon, thank you for your reply.

You are absolutely right. Now its working.
Somehow I have missed this camel case to dash conversions in properties. Sometimes its confusing :grinning:

“Kind of magic” here is the fact that this property was always used in camel case.
I am sure about this, because I have traced back all commits and it was working with a camel case. :thinking:

Another interesting question now, is why this worked if it does not supposed to work this way?

Thanks.

your call back was, some how - someway populated, not by Aurelia. It’s the only thing I can come up with.

Somehow I have missed this camel case to dash conversions in properties. Sometimes its confusing :grinning:

Yes it is. The mental model doesn’t switch completely between view and view model. A good rule to remember when working with Aurelia is it’s standard oriented, which you can see from following comparison:

<div style="background-color: red; width: 500px;"></div>
<!-- and -->
<div sortable="move-end.call: moveEnded(); handle: .row"></div>

I have encountered the same issue few times too :smile:

I believe no one can answer this question with 100% accuracy :sunglasses:

Yeah, same way as a style properties. Just to remember that.

By the way, I am the only one who has this “double logging” in the console?

Aurelia logger keep sending to console every message twice.
Do you have this behavior too?

You probably registered 2 console appender via calling .developmentLogging() and sometimes later LogManager.addAppender(new ConsoleAppender()) (guess)

1 Like

And again - you absolutely right :wink:

Thank you for your help!