在 aurelia 中使用 repeat.for 绑定自定义元素的正确方法是什么 [英] What is the correct way in aurelia to bind on a custom element using repeat.for
问题描述
使用 Aurelia 我在绑定和 repeat.for 上挣扎:假设我的视图模型中有一个属性 menuItems(MenuItem 的数组)，我想用自定义模板重复菜单项:
export class App {菜单项:菜单项[]；}导出类 MenuItem{标签:字符串；}在我的应用模板中，我使用自定义元素
我的自定义模板(menu-item.html):
<li>${label}</li>获取模板绑定或访问绑定的MenuItem的正确方法是什么?
我尝试了以下方法:${label} 和 ${item.label} 但这不起作用.我可以在 bind(bindingContext) 回调中看到 bindingContext 有一个属性item":bindingContext.item，它是被绑定的 MenuItem.
我还尝试在 MenuItem 类上创建可绑定属性:
导出类 MenuItem{@bindable 当前任何；标签:字符串；}和以下中继器:
<menu-item repeat.for="item of menuItems" current.bind="item"></menu-item>和相应的模板
<li>${current.label}</li>注意:请参阅下面的编辑 1，了解我对代码中这一点的评论.
这种方法也行不通.
其他探索包括不使用自定义元素(有效)，使用 <compose view-model='MenuItem', model.bind='item'/>，在此不起作用例如，我认为应该详细说明.
工作解决方案，另请参见Aurelia repeat.for 绑定自定义元素:
重复并绑定模板和视图模型类的自定义属性:
视图模型类:
从'aurelia-framework'导入{bindable, customElement}@customElement('菜单项')导出类 MenuItem{label = "默认标签";@绑定电流；构造函数(标签){this.label = 标签；}随附的(){console.log("MenuItem = attach");}}编辑 1:
我在输出中看到模板的 html 重复了很多 MenuItem.但是这些项目没有绑定: 是空的.我希望看到标签.
编辑 2:
在这篇文章中，我输入了menuItems 中的项目"，这不正确，它应该是menuItems 中的项目".但这不是我挣扎的原因，我只是在这篇文章中打错了
编辑 3:
@jeremy-danyow 建议
- html 应该格式正确:ul 中的 menu-item 不正确(使用
containerless属性有助于删除 menu-item 元素) - 自定义元素应该总是有一个结束标签我已经修改了代码.我还做了一个 plunker:Aurelia repeat.for 绑定在自定义元素上
那个plunker可以工作，提供一个@bindable属性；
浏览器只允许 li 元素位于 ul 元素中.<ul><menu-item></menu-item></ul> 是无效标记，与
一样是无效标记./div> 是无效标记.考虑制作一个 ul 而它是 li 元素.
另一件事——只有少数标准元素是自闭合"的——例如输入等.自定义元素必须始终有一个结束标记.错误:
您可能想知道为什么 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.
这篇关于在 aurelia 中使用 repeat.for 绑定自定义元素的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
