使用repeat.for在aurelia中绑定自定义元素的正确方法是什么 [英] What is the correct way in aurelia to bind on a custom element using repeat.for

问题描述

使用Aurelia我正在努力使用绑定和repeat.for：
假设我在我的viewmodel中有一个属性menuItems（一个 MenuItem 的数组）我会喜欢用自定义模板重复菜单项：

  export class App {
 menuItems ：MenuItem []; 
} 
导出类MenuItem {
 label：string; 
} 
  

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

 < require from =。/ menu-item>< / require> 
< ul> 
< menu-item repeat.for =itemItems项目>< / menu-item> 
< / ul> 
  

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

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

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

我尝试过以下方法： $ {label} 和 $ {item.label} 但这不起作用。我可以在 bind（bindingContext）回调中看到bindingContext有一个属性'item'： bindingContext.item 这是被绑定的MenuItem。

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

 导出类MenuItem {
 @bindable current any; 
 label：string; 
} 
  

以及以下转发器：

 < menu-item repeat.for =menuItems项目current.bind =item>< / menu-item> 
  

和相应的模板

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

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

此方法也不起作用。

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

工作解决方案，另见 Aurelia repeat.for绑定自定义元素
：

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

 < menu-item repeat.for =itemItems项目current.bind =itemcontainerless> < /菜单项> 
  

viewmodel类：

 从'aurelia-framework'导入{bindable，customElement} 
 
 @customElement（'menu-item'）
导出类MenuItem {
 label =默认标签; 
 @bindable current; 
 
构造函数（标签）{
 this.label = label; 
} 
附加（）{
 console.log（MenuItem = attach）; 
} 
} 
  

编辑1：

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

编辑2：

在这篇文章中我输入了menuItems中的项目 ，这不正确它应该是menuItems项目。但这不是我挣扎的原因，我在这篇文章中输了错误

编辑3：

@ jeremy-danyow建议

• html应该格式正确：ul中的menu-item不正确（使用 containerless 属性有助于删除menu-item元素）


• 自定义元素应该始终有一个结束标记
  我已经调整了代码。
  我也做了一个问题： Aurelia repeat.for绑定自定义元素

如果 @bindable 属性，该plunker可以工作;

解决方案

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

考虑制作< menu> 元素，其模板包含 ul ，而它的 li 元素代替。

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

你可能想知道为什么aurelia不能为我解决这个问题？

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

Using Aurelia I am struggling with binding and repeat.for : suppose I have in my viewmodel with a property menuItems (an array of MenuItem) I would like to repeat the menuitems with a custom template :

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

In my app template I use use a custom element

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

My custom template (menu-item.html):

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

What is the correct way the get the template bound or access the bound MenuItem?

I've tried the following: ${label} and ${item.label} but that does not work. I can see in the bind(bindingContext) callback that bindingContext has a property 'item' : bindingContext.item which is the MenuItem that is being bound.

I also tried to create bindable attribute on the MenuItem class:

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

and the following repeater:

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

and a corresponding template

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

note: see edit 1 below, for my comment on this point in the code.

This approach also does not work.

Other explorations included not using a custom element (worked), using <compose view-model='MenuItem', model.bind='item'/>, does not work in this example either and would be to elaborate, I think.

Working solution, see also Aurelia repeat.for binding on a custom element :

repeat and bind on a custom attribute of the template and viewmodel class:

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

The viewmodel class:

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

Edit 1:

I see in the output the html of templates repeated for as many there are MenuItems. But these items are not bound: the <li> is empty. I expected to see the labels.

Edit 2:

in this post I typed "items in menuItems", that's not correct it should be "item of menuItems". But that was not the cause of my struggling, I had it mis-typed in this post only

Edit 3:

@jeremy-danyow suggested that

• html should be well formed: menu-item within ul is not correct (using containerless attribute helps by removing the menu-item element)
• custom elements should always have a closing tag I have adapted the code. Also I made a plunker: Aurelia repeat.for binding on a custom element

That plunker works, provided a @bindable attribute;

解决方案

Browsers only allow li elements inside ul elements. <ul><menu-item></menu-item></ul> is invalid markup in the same way that <ul><div></div></ul> is invalid markup.

Consider making a <menu> element whose template contains the ul and it's li elements instead.

One other thing- only a few standard elements are "self closing"- eg inputs, etc. Custom elements must always have a closing tag. Bad: <menu-item /> Good: <menu-item></menu-item>

You might be wondering "why can't aurelia figure this out for me?"

Valid question. Here's why: Aurelia does not implement a custom html parser. It uses the DOM to parse standard HTML. This is different than other frameworks folks might be accustomed to that implement custom parsers for non-standard markup syntaxes.

这篇关于使用repeat.for在aurelia中绑定自定义元素的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！