Aurelia - 集合更改后不会创建 repeat.for 中的自定义元素

Question

在 Aurelia 中，我设置了一个模板对象列表，并允许用户使用按钮添加新模板。 每个模板都有一个包含自定义元素的详细视图。

<div class="middle-box">
    <a class="btn btn-primary" click.delegate="addMailTemplate()"><i class="fa fa-envelope"></i> Add Email</a>
    <a class="btn btn-primary" click.delegate="addNotificationTemplate()"><i class="fa fa-bell"></i> Add Notification</a>
</div>
<div class="row p-sm">
    <div class="col-xs-3 no-padding">
        <ul class="nav nav-pills nav-stacked" id="myTabs">
            <li class="${template.IsActive ? 'active' : ''}" repeat.for="template of templates">
                <a data-toggle="pill" href="#tab-${template.Id}" aria-expanded="${template.IsActive ? 'true' : 'false'}"> ${template.Key}</a>
            </li>
        </ul>
    </div>
    <div class="col-xs-9 no-padding">
        <div class="tab-content dad-templates-tabpane">
            <div id="tab-${template.Id}" class="tab-pane" repeat.for="template of templates">
                <div class="panel">
                    <div class="panel-body">
                        <email-template-editor template.bind="template" if.bind="template.TemplateType == 'email'"></email-template-editor>
                        <notification-template-editor template.bind="template" if.bind="template.TemplateType == 'notification'"></notification-template-editor>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我遇到的问题是，当我创建一个新模板（我将新模板添加到模板集合中）时，它会正确地将新项目添加到模板列表中，但它不会创建一个新的自定义电子邮件模板-编辑器元素。

在初始加载时，它会加载所有模板，如您在此处看到的：

所以这一定和repeat.for的绑定有关？

这是 emailtemplateeditor.js 的视图模型 js

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

这是 emailtemplateeditor.html 的 html

<template bindable="template">
    <div class="row">
        <div class="form-group">
            <div class="col-md-2 vcenter">
                <label for="key" class="control-label label-lg">Identification Key: </label>
            </div>
            <div class="col-md-6">
                <input type="text" id="key" value.bind="template.Key" class="form-control input-lg" placeholder="Enter the unique key" maxlength="100" />
            </div>
            <div class="col-md-2">
                <label class="label-lg">
                    <i class="fa fa-info-circle fa-2x label-lg" title="This is the parameter you pass into the WEBNOTIFICATION('Identification key') or EMAIL('Identification key') function."></i>
                </label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-2 vcenter">
                <label for="to" class="control-label label-lg">To: </label>
            </div>
            <div class="col-md-10">
                <input type="text" id="to" value.bind="template.To" class="form-control input-lg" placeholder="To: Enter recipients" />        
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 vcenter">
            <label for="subject" class="control-label label-lg">Subject: </label>
        </div>
        <div class="col-md-10">
            <input type="text" id="subject" value.bind="template.Subject" class="form-control input-lg" placeholder="E-mail subject" />        
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label for="key" class="control-label label-lg">Body: </label>
        </div>
        <div class="col-md-12">
            <textarea value.bind="template.Body" rows="20" class="form-control template-mail-body"></textarea>
        </div>
    </div>
</template>

这里是添加方法和数据加载的代码：

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);
    });
}

Answer 1

根据您在此处分享的内容，您的代码似乎没问题。您是否可以使用 Aurelia Inspector for Google Chrome 检查您的 DOM 并查看所有属性是否正确绑定到新添加的元素？

你需要一个Id：

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

还有一个TemplateType：

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

Answer 2

代码是正确的，应该可以工作。可能您新创建的模板没有正确的TemplateType。确保它具有 email 或 notification 并且一切正常。