将数组从父模板传递到子模板 [英] Pass array from parent template to child template

问题描述

我们已经能够将数组从父屏幕传递到模板. customAttribute有效，而historyItems无效.

We have been able to pass an array from the parent screen to the template. The customAttribute works but the historyItems does not.

parent-template.html

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

child-template.html

<template>

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

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

</template>

child-template.ts

child-template.ts

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

@autoinject
export class ChildTemplate {

    @bindable customAttribute : string;
    @bindable historyItems;

    constructor() {

    }
}

问题

我们如何传递historyItems数组?

推荐答案

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

按照惯例，Aurelia会对包含混合大小写的自定义元素名称和可绑定属性名称进行连字符连接.这是因为HTML不区分大小写，因此historyItems.bind之类的表达式与historyitems.bind相同.但是，这对于区分大小写的JavaScript无效.参见 https://github.com/aurelia/binding/issues/307

By convention, Aurelia hyphenates custom element names and bindable property names that have mixed casing. That is because HTML is case-insensitive, so an expression like historyItems.bind wouldn't be different than historyitems.bind. However, the same is not valid for JavaScript, which is case-sensitive. See https://github.com/aurelia/binding/issues/307

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

In short, for mixed case properties you must use a hyphen to split words:

@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

这篇关于将数组从父模板传递到子模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！