Aurelia 自定义元素绑定答案

【问题标题】：Aurelia custom element bindingAurelia 自定义元素绑定
【发布时间】：2016-09-30 23:38:41
【问题描述】：

我正在尝试在 Aurelia 中构建自定义元素。在这一点上，这就是我所拥有的：

item.html

<template>
    <span>${someProperty}</span>
</template>

item.ts

import {bindable} from 'aurelia-framework';
class Item {
    @bindable someProperty: string;
}

parent.html

<template>
<require from="./item"></require>
<item repeat.for="item of items"></item>
</template>

parent.ts

class Parent {
    items: Item[];

    loadItems() {
        // at this point, I'm sure that items is getting populated.
        this.items = dataservice.loadItems();
    }
}

我似乎在文档中找不到任何涉及这种情况的内容。我得到的是跨度是空的。我在控制台中没有收到任何错误。我这样做是否正确？

【问题讨论】：

标签： aurelia

【解决方案1】：

您需要使用自定义元素和可绑定属性。您还需要将该类注册为自定义元素。试试这个：

item.html

<template>
    <span>${someProperty}</span>
</template>

item.js

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

@customElement('item')
class Item {
    @bindable someProperty: string;
}

parent.html

<template>
    <require from="./item"></require>
    <item repeat.for="item of items" someProperty.bind="item"></item>
</template>

parent.ts

class Parent {
    items: Item[] = [
        'trees',
        'swans',
        'capes',
        'a horse',
        'triangles',
        'witches',
        'a different horse'
    ];
}

有关更多信息，请查看我的一些关于自定义元素和自定义属性的博客，例如：http://davismj.me/blog/semantic-custom-element/

【讨论】：

这揭示了我对文档的报道存在一个明显的漏洞。谢谢！
虽然我初步成功地让我的自定义元素的结构正确生成，但我似乎无法让我的任何绑定工作。没有错误，我只是在放置 ${binding} 的地方出现空虚。
打开一个新问题并在此处链接，我会看看。不幸的是，这还不够信息，抱歉。

【解决方案2】：

您需要绑定到项目的 someProperty。下面假设 items[] 是一个字符串数组。

<div repeat.for="item of items">
    <item someProperty.bind="item"></item>
</div>

抱歉，我正在使用手机。

【讨论】：