如何在 Aurelia 中进行复杂的绑定？答案

【问题标题】：How to have a complex binding in Aurelia?如何在 Aurelia 中进行复杂的绑定？
【发布时间】：2016-10-17 23:20:26
【问题描述】：

因错字而编辑

我目前正在尝试掌握 Aurelia (aurelia.io)。到目前为止，总体而言它非常好，我喜欢它，但我一直在尝试将自定义组件绑定到 VM 的属性。

我的虚拟机 (YardMap.ts) 有一个属性，它是一个对象数组：

export class YardMap {
...
    locationsData:LocationModel[];
...
}

相应的视图 (YardMap.html) 使用了一个组件，我希望能够将数据从 VM 传递到该组件：

<template>
    <require from="./resources/map-viewer"></require>
    ...
    <map-viewer id="mapWrapper" class="threeContainer" locationsData.bind="locationsData"></map-viewer>
    ...
</template>

最后，我的组件本身 (map-viewer.ts) 具有与来自 VM 的相同类型的可绑定属性和 propertychanged 处理程序：

@noView()
export class MapViewer {
    @bindable locationsData:LocationModel[] = [];

    locationsDataChanged(newValue:LocationModel[]){
        console.log(newValue.length);
    }
}

最后一个方法永远不会被调用。如果我的属性是原始属性，它会很容易工作，但如果它是一个对象或对象数组，我似乎无法让绑定工作。

有什么想法吗？

【问题讨论】：

我没有绑定到对象的问题，还不需要绑定数组。如果您在视图中写入位置数据而不是位置数据会怎样？这是我在您的代码和我的代码之间看到的唯一区别。出色地。那和@noView，但你说它适用于原语，所以我猜数组也应该适用。像这样：
该死，我喜欢这个网站！我在这个问题上敲了 2 个小时的头，我只需要在这里发布我的问题，让你来救我不要破坏我的桌子！你说得对，我忘记了代码中骆驼大小写的约定，模板中的连字符......谢谢！
太棒了！我会把它作为答案发布

标签： typescript binding aurelia

【解决方案1】：

在视图中写入位置数据而不是位置数据，如下所示：

<map-viewer id="mapWrapper" class="threeContainer" locations-data.bind="locationsData"></map-viewer>

【讨论】：

【解决方案2】：

您需要在这样的视图模型中使用property.bind 或property.two-way（如果您也需要从视图到模型的数据）：

<map-viewer id="mapWrapper" class="threeContainer" locations-data.two-way="locationsData"></map-viewer>

【讨论】：

是的，你是对的，但这只是我在复制代码时丢失的一点。我尝试使用“.bind”...我会纠正我的问题。