在自定义属性中绑定多个表达式

Question

我在 Aurelia 自定义属性中绑定多个表达式时遇到问题。我发布这个是因为我一直在努力，我相信文档可能会遗漏一些东西（？）。希望这不是我错过的愚蠢的事情，这样更多的人也会使用它。

这是我的简化实现。

resultCustomAttribute.js

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

@inject(Element)
export class resultCustomAttribute {
    @bindable foo;
    @bindable bar;
    constructor(element) {
        this.element = element;
        console.log(this.foo); // => null
        console.log(this.bar); // => null
    }
    fooChanged(value){
        console.log(value) // Does not run
    }
}

main.js

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .feature('resources'); // resources is a folder in the source root
                                  with an index.js file that sets my custom
                                  attribute as a globalResource 

    aurelia.start().then(a => a.setRoot());
}

home.html

<template>
    .
    .
    .
    <div repeat.for="item of items"> <!-- items is an array of objects in home.js-->
        <h4>${item.title}</h4>
        <div result="foo.bind: item.foo; bar.bind: item.bar">
            ...
        </div>
    </div>
    .
    .
    .
</template>

问题是无论我绑定 foo 还是 bar，它们在我的自定义属性中都会变成 null。但是，该元素已正确传递给 resultCustomAttribute。我的实现是正确的还是我遗漏了什么？

编辑： 上面的实现似乎是正确的。当我简化我的代码以提供一个通用问题时，我删除了命名为 selectionIndex 的驼峰式命名变量并将其替换为 bar，如上所示。这导致 selectionIndexChanged 函数无法运行.

而this.foo和this.bar在构造函数中为null的原因仅仅是因为在第一次更改值之前构造函数是运行。

Answer 1

这有点尴尬。在问了这个问题之后 foo 变量突然开始起作用了，我找不到如何重现我原来的问题。 fooChanged 运行正确，但我的 barChanged 仍然没有运行。

这是因为bar变量在我的真实代码中实际上并没有命名为bar，它是一个驼峰命名的变量selectionIndex。当使用 camelCase 命名时，aurelia 没有正确挂钩我的 selectionIndexChanged。我将其更改为 selectionindex 和 selectionindexChanged，现在这两个变量都按应有的方式绑定了。

抱歉浪费了 space。但也许这对某人有用。

编辑查看 shunty 的评论，了解如何在自定义属性中使用驼峰式大小写

在自定义属性中绑定多个表达式

Binding multiple expressions in custom attributes

aurelia