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>

疯狂的事情似乎根本就没有。即使我在课程中将其设置为true，它也会将collapsed显示为false。

我这样称呼它

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

有什么想法吗？我错过了自定义元素吗？

Answer 1

简单的解决方案。您在this.collapsed = !this.collpased;中有拼写错误。

无法在后面的代码中更改自定义元素的绑定值

1 个答案: