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

在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
    }
}

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());
}

main.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
    }
}

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>

.
.
.
${item.title}
...
.
.
.

问题是，无论我如何绑定foo和bar，它们在我的自定义属性中都会变成

null

。但是，元素被正确地传递给resultCustomAttribute。我的实现是正确的还是遗漏了什么

编辑：上述实现似乎毕竟是正确的。当我简化代码以提供一个通用问题时，我删除了名为variable

selectionionindex

的camelCase，并将其替换为

bar

，如上所示。这导致

selectionIndexChanged

功能无法运行

---

而

this.foo

和

this.bar

在构造函数中为空的原因很简单，因为构造函数是在第一次更改值之前运行的。

这有点尴尬。在突然问了这个问题之后，

foo

变量开始工作，我找不到如何重现我原来的问题

fooChanged

运行正确，但my

barChanged

仍然没有运行

这是因为在我的真实代码中，

bar

变量实际上并没有命名为bar，它是一个带有camelCase naming

selectionIndex

的变量。使用camelCase命名时，aurelia没有正确钩住我的

selectionIndexChanged

。我将其更改为

selectionindex

和

selectionindex已更改

，现在这两个变量都已按其应有的方式绑定

对不起，浪费了空间。但也许这会对某些人有用

编辑

---

有关如何在自定义属性中使用camelCase的解释，请参见分流的注释

如果将以下方法添加到自定义属性类中会发生什么：

bind（bindingContext）{console.log（this.foo）；console.log（this.bar）；}

我也被这个方法挫败了。我花了很长时间才意识到，在HTML中，属性绑定应该是“selection index”，而在js代码中，变量应该是“selectionIndex”（正如您所看到的）。您应该会发现selectionIndexChanged会起作用。几乎每次都能抓住我！