编辑1：

Question

使用Aurelia我正在努力进行绑定和重复。假设我在viewmodel中有一个属性menuItems（MenuItem数组）我想用自定义模板重复菜单项：

export class App {
    menuItems : MenuItem[];
}
export class MenuItem{
   label:string;
}

在我的app模板中，我使用自定义元素

<require from="./menu-item"></require>
<ul>
  <menu-item repeat.for="item of menuItems"></menu-item>
</ul>

我的自定义模板（menu-item.html）：

<template>
  <li>${label}</li>
</template>

获取模板绑定或访问绑定的MenuItem的正确方法是什么？

我已尝试过以下操作：${label}和${item.label}但这不起作用。我可以在bind(bindingContext)回调中看到bindingContext有一个属性＆＃39; item＆＃39; ：bindingContext.item，它是绑定的MenuItem。

我还尝试在MenuItem类上创建可绑定属性：

export class MenuItem{
   @bindable current any;
   label:string;
}

以及以下转发器：

<menu-item repeat.for="item of menuItems" current.bind="item"></menu-item>

和相应的模板

<template>
  <li>${current.label}</li>
</template>

注意：请参阅下面的编辑1，以获取我对代码中此点的评论。

这种方法也行不通。

其他探索包括不使用自定义元素（工作），使用<compose view-model='MenuItem', model.bind='item'/>，在这个例子中也不起作用，我认为会详细说明。

工作解决方案，另见Aurelia repeat.for binding on a custom element ：

重复并绑定模板和viewmodel类的自定义属性：

<menu-item repeat.for="item of menuItems" current.bind="item" containerless></menu-item>

viewmodel类：

import {bindable, customElement} from 'aurelia-framework'

@customElement('menu-item')
export class MenuItem{
  label = "default label";
  @bindable current;

  constructor(label){
    this.label = label;
  }
  attached(){
    console.log("MenuItem = attached");
  }
}

编辑1：

我在输出中看到模板的html重复了很多有MenuItems。但这些项目没有约束：<li>为空。我希望看到标签。

编辑2：

在这篇文章中，我在menuItems＆＃34;中键入＆＃34;项目，这不正确它应该是＆＃34; menuItems＆＃34;项目。但这并不是我挣扎的原因，我只是在这篇文章中输错了

编辑3：

@ jeremy-danyow建议

html应该格式正确：ul中的menu-item不正确（使用containerless属性有助于删除menu-item元素）
自定义元素应始终具有结束标记我已经调整了代码。我也做了一个plunker：Aurelia repeat.for binding on a custom element

该plunker工作，提供了@bindable属性;

Answer 1

浏览器仅允许li个元素中的ul个元素。 <ul><menu-item></menu-item></ul>是无效标记，与<ul><div></div></ul>无效标记的方式相同。

考虑制作一个<menu>元素，其模板中包含ul及其li元素。

另一件事 - 只有少数标准元素是＆＃34;自我关闭＆＃34; - 例如输入等。自定义元素必须始终具有结束标记。不好：<menu-item /> 好：<menu-item></menu-item>

你可能想知道＆＃34;为什么aurelia能为我解决这个问题？＆＃34;

有效问题。原因如下：Aurelia没有实现自定义html解析器。它使用DOM来解析标准HTML。这与人们习惯于为非标准标记语法实现自定义解析器的其他框架不同。

使用repeat.for在aurelia中绑定自定义元素的正确方法是什么

编辑1：

编辑2：

编辑3：

1 个答案: