自定义元素可绑定不起作用

Question

所以我有以下自定义元素：

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

@customElement('wave-canvas')
@inject(Element, Router)
@bindable({name:'hasGenerate', defaultValue:true})
export class WaveCanvas {
    constructor(element, router) {
        this.router = router;
        this.element = element;

    }

    goHome() {
        this.router.navigate('welcome');
    }

    attached() {
        let initialEvent = new CustomEvent('init', {
            bubbles: true
        });
        this.element.dispatchEvent(initialEvent);

    }
}

<template>
    <div class="row">
        <div class="col-xs-8">
            <h3>${router.currentInstruction.config.title}</h3>        
        </div>
        <div class="col-xs-4 text-right" style="padding-top: 10px">
            <button class="btn" click.trigger="goHome()"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            <canvas id="theCanvas" width="800" height="600" style="border: 1px solid #ddd; margin: 5px"></canvas>
        </div>
        <div class="col-md-3">
            <form submit.trigger="submit()" class="">
                <content select="form-elements"></content>

                <button show.bind="hasGenerate" type="submit" class="btn btn-sm btn-primary">Generate</button>
            </form>
            <content select="other-values"></content>

        </div>
    </div>
</template>

这样使用：

<template>
    <div class="container z-depth-2">
        <require from="../components/wave-canvas"></require>
        <wave-canvas hasGenerate="false" init.delegate="setInitialContent($event)">
            <form-elements>
            </form-elements>
            <other-values>
            </other-values>
        </wave-canvas>
    </div>

</template>

对于这个 wave-canvas 实例，我想隐藏“生成”按钮，但按照我当前的设置方式，它不起作用。如果我更改视图模型中的默认值，它会按预期隐藏，但当我将 html 中的属性指定为 false 时则不会。我做错了什么？

Answer 1

Aurelia 将连字符混合大小写可绑定属性名称、自定义元素名称和自定义属性名称。这是必需的，因为 DOM lower-cases 所有元素和属性名称。

尝试 has-generate:

<wave-canvas has-generate="false" ...

您可能还想使用 has-generate.bind="false"。这样 false（布尔值）将分配给您元素的 hasGenerate 属性（与字符串 'false' 相对）。

自定义元素可绑定不起作用

Custom element bindable not working

javascript

aurelia