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

Question

使用Aurelia我正在努力使用绑定和repeat.for:假设我在viewmodel中有一个属性menuItems(一个数组MenuItem)我想用自定义模板重复menuitems:

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

在我的应用模板中,我使用自定义元素

<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有一个属性'item':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绑定自定义元素 :

重复并绑定模板和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中的项目",这是不正确的应该是"menuItems项目".但这并不是我挣扎的原因,我只是在这篇文章中输错了

编辑3:

@ jeremy-danyow建议

• html应该格式正确:ul中的menu-item不正确(使用containerless属性有助于删除menu-item元素)
• 自定义元素应始终具有我已调整代码的结束标记.我也做了一个plunker:Aurelia repeat.for绑定自定义元素

那个plunker工作,提供了一个@bindable属性;

Answer 1

浏览器只允许li元素内有ul元素。 无效标记与无效标记的<ul><menu-item></menu-item></ul>方式相同。<ul><div></div></ul>

考虑制作一个<menu>其模板包含 theul和 it'sli元素的元素。

另一件事 - 只有少数标准元素是“自关闭” - 例如输入等。自定义元素必须始终具有结束标签。坏：<menu-item /> 好：<menu-item></menu-item>

您可能想知道“为什么 aurelia 不能帮我解决这个问题？”

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