Question

我希望能够更改我的数据并让它重新运行repeat.for子元素类函数bind()。因为我需要能够在父级中更改data并正确地重新绘制child。

总之，我想在repeat.for发生之后更改data中的parent.js。我希望孩子通过重新运行bind()来反映正确的模板。

Parent.html：

<template>
  <button click.trigger="changeData()">test</button>
  <li class="event-item eb-item-created" repeat.for="d of data">
    <child data.two-way="d"></child>
  </li>
</template>

Child.html

<template>
  <require from="./task/text/text"></require>
  <require from="./task/mcma/mcma"></require>
  <require from="./task/grid/grid"></require>

  <text containerless if.bind="text" data.two-way="data"></text>
  <mcma containerless if.bind="mcma" data.two-way="data"></mcma>
  <grid containerless if.bind="grid" data.two-way="data"></grid>
</template>

Child.js：

  ...
      bind() {
        this.getDataType(); // calls a switch to grab data.type 
      }

    getDataType() {
      switch (this.data.type) {
        case 'text':
          this.text = true;
          break;
...

Answer 1

从中改变child.js：

@bindable data;

bind() {
  this.getDataType(); // calls a switch to grab data.type 
}

getDataType() {
  switch (this.data.type) {
    case 'text':
      this.text = true;
      break;
    ...
  }
  ...

到此：

@bindable data;

dataChanged(newValue, oldValue) {
  switch (this.data.type) {
    case 'text':
      this.text = true;
      break;
    ...
  }
  ...
}

只要方法的名称与@bindable属性的名称加上单词@bindable匹配，Aurelia就会在Changed属性发生更改时自动调用视图模型上的方法。

您也可以考虑将视图模型绑定中的所有逻辑直接删除到type属性：

<text containerless if.bind="data.type === 'text'" data.bind="data"></text>
<mcma containerless if.bind="data.type === 'mcma'" data.bind="data"></mcma>
<grid containerless if.bind="data.type === 'grid'" data.bind="data"></grid>

数据更改后重新运行bind（）或attach（），其中使用repeat.for

1 个答案: