repeat.for가 사용 된 데이터 변경 후 bind() 또는 attached()를 다시 실행하십시오.

Question

데이터를 변경하고 repeat.for 자식 요소 클래스 기능 bind()을 다시 실행하고 싶습니다. 부모에게서 data을 변경하고 child을 올바르게 다시 그릴 수 있어야하기 때문에.

즉, data을 parent.js에서 repeat.for가 발생한 후 변경하고 싶습니다. 어느 아이들이 나중에 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 데이터 ; 이에

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

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

:

@bindable 데이터; @bindable 속성은 한 메서드의 이름이 @bindable이 호텔의 이름과 단어 Changed 일치로 변경 될 때

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

아우렐 리아는 자동으로 뷰 - 모델의 메소드를 호출합니다.

당신은 또한 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>