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

在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>

这是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>

识别码：
致：
主题：
正文：

下面是add方法和数据加载的初始代码：

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

activate（）{
var id=$（“#数据分析定义id”）.val（）；
var sortByCreatedAt=函数（a，b）{
返回（a.CreatedAtb.CreatedAt）？1:0）；
}
回报你的承诺([
这个.dataAnalysisDefinitionService.get（id）.then（data=>{
this.dad=数据；
}),
这个.dataAnalysisDefinitionService.getEmailTemplates（id）.then（数据=>{
data.forEach（函数（obj）{obj.TemplateType=“email”；}）；
this.templates=this.templates.concat（数据）；
this.templates.sort（sortByCreatedAt）；
}),
这个.dataAnalysisDefinitionService.getNotificationTemplates（id）.then（数据=>{
forEach（函数（obj）{obj.TemplateType=“通知”；}）；
this.templates=this.templates.concat（数据）；
this.templates.sort（sortByCreatedAt）；
})
]);
}
addMailTemplate（）{
var self=这个；
this.dataAnalysisDefinitionService.createEmailTemplate（this.dad.Id）。然后（函数（newTemplate）{
self.templates.push（newTemplate）；
});
}
addNotificationTemplate（）{
var self=这个；
this.dataAnalysisDefinitionService.createNotificationTemplate（this.dad.Id）。然后（函数（newTemplate）{
self.templates.push（newTemplate）；
});
}

从您在此处共享的内容来看，您的代码似乎很好。是否可以使用Google Chrome的Aurelia Inspector检查DOM，并查看是否所有属性都正确绑定到新添加的元素

您需要一个

Id

：

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

和

模板类型

：

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

---

代码是正确的，应该可以工作。可能您新创建的模板没有正确的

TemplateType

。确保它有

电子邮件

或

通知

，一切正常。

你在使用firefox吗？使用repeat是不友好的。因为除了在同一个元素上使用循环变量之外，我使用的是chrome浏览器，甚至还没有在firefox上尝试过：-）你能添加

电子邮件模板编辑器

视图和viewmodel的代码吗？@Jessedbruijne我已经根据请求添加了这些代码。

activate

方法在路由模块上工作，您已经在HTML中绑定了，因此

activate

方法在这里是多余的。您可以尝试删除它吗？我没有在新创建的模板对象上设置templatetype！一旦赏金发放延迟结束，赏金就会向你走来。

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