コードの後ろにあるカスタム要素のバインド値を変更できません

Question

単純なクリック代理人から自分自身を崩壊させるカスタム要素を作成しようとしていますが、うまくいかないようです。

私は私のjsファイルで

import {inject, bindable, bindingMode} from 'aurelia-framework'; 

export class DataGridCustomElement { 
    @bindable({ defaultBindingMode: bindingMode.oneTime }) columns = []; 
    @bindable({ defaultBindingMode: bindingMode.oneTime }) items = []; 
    @bindable() collpased = true; 


    collapseClick() { 
    this.collapsed = !this.collpased; 
    } 
} 

をこのコードを持っており、ここに私のHTMLファイルがある

<template> 
    <require from='./data-grid.css'></require> 
    <div class="collapse-arrow" click.delegate="collapseClick()"> 
    <span class="collapse-icon glyphicon ${collapsed ? 'glyphicon-plus' : 'glyphicon-minus'}" aria-hidden="true"></span> 
    <span>Order Lines</span> 
    </div> 
    <div class="collapse-block" css="${collapsed ? 'display:none;' : 'display:block;'}"> 
    <table class="data-grid"> 
     <thead> 
     <tr> 
      <td repeat.for="column of columns"> 
      ${column.title} 
      </td> 
     </tr> 
     </thead> 
     <tbody> 
     <tr repeat.for="item of items"> 
      <td repeat.for="column of columns"> 
      ${item[column.propertyName]} 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</template> 

クレイジーなことは、それだけですべてしていないようです。それはcollapsedを私がクラスで真に設定していても、get goからfalseであると示しています。

私はそう

<data-grid columns.bind="invoiceColumns" items.bind="lineData"></data-grid> 

任意のアイデアのようにそれを呼び出すのですか？カスタム要素について何か不足していますか？

Answer 1

簡単な解決策。 this.collapsed = !this.collpased;にタイプミスがあります。