templating: Uncaught TypeError: Cannot read property 'animatableElement' of undefined

I’m submitting a bug report

Library Version: 1.1.1
Operating System: Windows [8.1]
Node Version: 6.5.0
NPM Version: 3.10.6
JSPM OR Webpack AND Version webpack 2.1.0-beta.22
Browser: Chrome 53.0.2785.116 m
Language: TypeScript 2.0.3

Current behavior:

while removing elements from a repeater I got the error reported in the subject. It happen also that after adding the second item an empty row is added.

The code is fairly simple:

<table>
    <tr repeat.for="file of files">
        <td>${file.FileName}</td>
        <td><button click.delegate="removeFile(file)">delete</button></td>
    </tr>
</table>

and in my vm:

import { autoinject } from 'aurelia-framework';
import { DocumentService } from './document-service';

@autoinject
export class DocumentBox {

    constructor(private documentService: DocumentService) {    }

    files: Array<any> = [];

    removeFile(file) {
        this.documentService.acquireToken(() => {
            this.documentService.deleteDocument(file.Id, () => {
                this.files.splice(this.files.indexOf(file), 1);
            });
        });
    }

}

Expected/desired behavior:

To proper render the dom elements according to the binding status.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18 (6 by maintainers)

Commits related to this issue

fix(array-observation): coerce splice args (#552) fixes aurelia/templating#470 — committed to aurelia/binding by jdanyow 8 years ago

Most upvoted comments

Looks like we need to coerce indexes to an integer in the array observation code.

In @ben-girardet’s sample there’s this:

  closeMessage(messageId) {
    let index = -1;
    for (let i in this._messages) {
      if (this._messages[i].id === messageId) {
        index = i;
        break;
      }
    }
    if (index !== -1) {
      // bug is here, when splicing the _message array
      this._messages.splice(index, 1);
    }
  }

this._messages is an array. Using for (let i in this._messages) { means i will be a string (eg "0" instead of 0). This is breaking the code that computes the splices from the change records.

jdanyow on Dec 18, 2016

Ok @EisenbergEffect and @jdanyow rimraf npm_modules => npm install and now It’s working great!

Don’t know what npm is doing, but sometimes it’s messing things up!

enrico-padovani on Oct 3, 2016