Пользовательский элемент Привязываемого не работает

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> 

Для этого экземпляра волны холста я хотел бы, чтобы скрыть кнопку Создать , но способ, который у меня есть в настоящее время, не работает. Если я изменил значение по умолчанию в модели представления, оно скроется, как ожидалось, но не тогда, когда я укажу атрибут в html как false. Что я делаю не так?

Answer 1

Aurelia будет переносить имена объектов смешанного типа, которые могут быть связаны друг с другом, имена пользовательских элементов и имена пользовательских атрибутов. Это необходимо, потому что DOM уменьшает все имена элементов и атрибутов.

Попробуйте has-generate:

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

Вы также можете использовать has-generate.bind="false". Таким образом, false (boolean) будет присвоен свойству вашего элемента hasGenerate (в отличие от строки 'false').