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的这个实例，我想隐藏Generate按钮，但是我现在设置它的方式，它不起作用。如果我更改视图模型中的默认值，它会按预期隐藏，但不会在html中将属性指定为false时隐藏。我做错了什么？

Answer 1

Aurelia将连接混合大小写可绑定属性名称，自定义元素名称和自定义属性名称。这是必要的，因为DOM会降低所有元素和属性名称。

尝试has-generate：

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

您可能还想使用has-generate.bind="false"。这种方式false（布尔值）将分配给元素的hasGenerate属性（而不是字符串'false'）。

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

1 个答案: