情况

Question

情况

我们已经能够将父屏幕中的数组传递给模板。 customAttribute有效但historyItems没有。

父 - 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>

儿童template.html

<template>

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

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

</template>

儿童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

将数组从父模板传递到子模板

情况

问题

1 个答案: