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。我的实施是正确还是我错过了什么？

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

在构造函数中this.foo和this.bar为空的共鸣只是因为构造函数在第一次更改值之前运行。

Answer 1

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

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

抱歉浪费空间。但也许这对某人有用。

修改请参阅shunty的评论，了解如何在自定义属性中使用camelCase

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

1 个答案: