将数组从 parent 模板传递到 child 模板

Question

情况

我们已经能够将数组从 parent 屏幕传递到模板。 customAttribute 有效，但 historyItems 无效。

parent-template.html

<template>

    <require from="./child-template"></require>

    <child-template

         historyItems.bind="history[0].HistoryItems" 
         custom-attribute.bind="history[0].HistoryItems.length">

    </child-template>

</template>

child-template.html

<template>

    ${customAttribute} 
    ${historyItems.length} 
    ${historyItems}

    <p repeat.for="item of historyItems">
        Foobar
    </p>

</template>

child-template.ts

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

@autoinject
export class ChildTemplate {

    @bindable customAttribute : string;
    @bindable historyItems;

    constructor() {

    }
}

问题

我们如何传递 historyItems 数组？

Answer 1

你必须使用 history-items.bind="history[0].HistoryItems".

按照惯例，Aurelia 将自定义元素名称和具有混合大小写的可绑定属性名称连字符。这是因为 HTML 不区分大小写，所以像 historyItems.bind 这样的表达式与 historyitems.bind 没有什么不同。但是，对于区分大小写的 JavaScript 则同样无效。参见 https://github.com/aurelia/binding/issues/307

简而言之，对于大小写混合的属性，您必须使用连字符来拆分单词：

@bindable historyItems; <-- js file
history-items.bind="something"; <-- html file
repeat.for="item of historyItems" //<-- here you should not use hyphen because it is not an html expression

将数组从 parent 模板传递到 child 模板

Pass array from parent template to child template

aurelia

情况

问题