無法更改代碼後面的代碼中的自定義元素的綁定值

我想創建一個自定義元素，允許我從簡單的點擊委託自己摺疊，但它似乎不工作。無法更改代碼後面的代碼中的自定義元素的綁定值

我有這樣的代碼在我的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爲false，即使我在課堂上將其設置爲true。

我打電話像這樣

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

任何想法？我是否錯過了自定義元素？

來源

2017-02-09 Carson

它是否可以在'@bindable（）collpased = true;'中的'@ bindable'之後移除空圓括號？除非添加細節，否則我一直使用它，沒有括號。 – LStarky

另外，您在'this.collapsed =！this.collpased;'中有一個錯字。這也在你的代碼？ – LStarky

@Larkark呃......這很令人尷尬...有時你需要第二組眼睛。謝謝！ – Carson

簡單的解決方案。你在this.collapsed = !this.collpased;有一個錯字。

來源

2017-02-09 19:10:54 LStarky

基於錯字的錯誤是最容易解決的錯誤。非常棒@Lstarky！ –

無法更改代碼後面的代碼中的自定義元素的綁定值

回答

相關問題