Aurelia - Custom element inside repeat.for is not created after collection changes

Question

In Aurelia, I've setup a list of template objects and allow a user to add new templates using a button. Each template has a detail view that consists of a custom element.


     Add Email
     Add Notification


    
        
            
                 ${template.Key}

The problem I have is that when I create a new template (I add the new template to the templates collection) it correctly adds the new item to the list of templates but it doesn't create a new custom email-template-editor element.

On the initial load, it does load all the templates as you can see here:

So this must have something to do with the binding of the repeat.for?

Here's the viewmodel js for the emailtemplateeditor.js

export class EmailTemplateEditor {
    activate(model) {
        this.template = model;
    }
}

And here's the html for the emailtemplateeditor.html

Here's the code for the add methods and the data loading intially:

activate() {
    var id = $("#data-analysis-definition-id").val();
    var sortByCreatedAt = function(a, b) {
        return (a.CreatedAt < b.CreatedAt) ? -1 : ((a.CreatedAt > b.CreatedAt) ? 1 : 0);
    }
    return Promise.all([
        this.dataAnalysisDefinitionService.get(id).then(data => {
            this.dad = data;
        }),
        this.dataAnalysisDefinitionService.getEmailTemplates(id).then(data => {
            data.forEach(function(obj) { obj.TemplateType = "email"; });
            this.templates = this.templates.concat(data);
            this.templates.sort(sortByCreatedAt);
        }),
        this.dataAnalysisDefinitionService.getNotificationTemplates(id).then(data => {
            data.forEach(function(obj) { obj.TemplateType = "notification"; });
            this.templates = this.templates.concat(data);
            this.templates.sort(sortByCreatedAt);
        })
    ]);
}

addMailTemplate() {
    var self = this;
    this.dataAnalysisDefinitionService.createEmailTemplate(this.dad.Id).then(function (newTemplate) {
        self.templates.push(newTemplate);
    });
}

addNotificationTemplate() {
    var self = this;
    this.dataAnalysisDefinitionService.createNotificationTemplate(this.dad.Id).then(function (newTemplate) {
        self.templates.push(newTemplate);
    });
}

Jesse · Accepted Answer

Your code seems to be fine, from what you've shared here. Is it possible you can inspect your DOM using the Aurelia Inspector for Google Chrome and see if all the properties are correctly bound to the newly added element?

You need an Id:

id="tab-${template.Id}"

and a TemplateType:

if.bind="template.TemplateType == 'email'"

Aurelia - Custom element inside repeat.for is not created after collection changes

Answers (2)

Related Questions