# Function Reference does not work anymore

**URL:** <https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612>\
**Category:** Help Requests\
**Created:** [September 7, 2018, 5:58pm UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612 "2018-09-07T17:58:05Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [September 7, 2018, 5:58pm UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/1 "2018-09-07T17:58:05Z")

</div>

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](https://github.com/RubaXa/Sortable)

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

```auto
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:

```auto
<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,

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

```

a `moveEnd` property is always `null`.

 ![moveEnd](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/9/9f5383c98bb862a957885dc2cf2f78f805709849.png)

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.

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [September 7, 2018, 5:59pm UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/2 "2018-09-07T17:59:02Z")

</div>

`view-spy` output

 ![viewSpy](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/1/1ca63911b355ec414acf8ac82542de402207ae7b.png)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 7, 2018, 11:11pm UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/3 "2018-09-07T23:11:36Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [September 8, 2018, 8:12am UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/4 "2018-09-08T08:12:58Z")

</div>

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 😀

“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. 🤔

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

Thanks.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 8, 2018, 8:19am UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/5 "2018-09-08T08:19:01Z")

</div>

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 😀

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:

```html
<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 😄

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [September 8, 2018, 8:25am UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/6 "2018-09-08T08:25:22Z")

</div>

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

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?

 ![dobleLog](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/9/955bc5d6339e4a9db06176088587a273c31cc3fa.png)

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [September 8, 2018, 8:40am UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/7 "2018-09-08T08:40:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![indiwine](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/indiwine/32/1042_2.png) [@indiwine](https://discourse.aurelia.io/u/indiwine)\
**Post date:** [September 8, 2018, 9:48am UTC](https://discourse.aurelia.io/t/function-reference-does-not-work-anymore/1612/8 "2018-09-08T09:48:33Z")

</div>

And again - you absolutely right 😉

Thank you for your help!