0
간단한 목록을 관리하고 항목의 이름을 바꾸고 순서를 변경하는 사용자 정의 요소를 작성하려고합니다. 불행히도 나는 실제로 정말로 힘들어하는 이상한 행동을 알아 차리고있다.아우렐 리아에서 이상한 동작을 배열 변경하십시오.
- 입력에 입력하면 오렐가 항목을 갱신하는 변화로서 인식 될 나타나지
- 입력되면 /의 인덱스 페이지로드로 한 아이템을 변경하고 그 방법을 통해 어레이로 그 위치를 변경 항목이 손실 된 것처럼 보입니다 (-1로 바뀜). 항목이 입력 필드를 통해 변경되지 않으면 배열의 색인이 올바르게 인식되고 정렬이 작동합니다.
배열, 바인딩 및 어쩌면 자식 요소와 관련된 알려진 문제가 있습니까? 원하는 행동을하기 위해 접근 한 전투 테스트는 무엇입니까? 고마워요!
부모 요소
...
<list items.bind="list"></list>
...
목록 요소
<template>
<div class="input-group" repeat.for="item of items">
<input value.bind="item" class="input" type="text" placeholder="Item" autofocus>
<a click.delegate="deleteItem(item)">X</a>
<a click.delegate="moveItemUp(item)">^</a>
<a click.delegate="moveItemDown(item)">v</a>
</div>
<a click.delegate="addItem()">Add Item</a>
목록 JS
export class List {
@bindable({defaultBindingMode: bindingMode.twoWay}) items;
constructor() {}
addItem() {
this.items.push('new')
}
deleteItem(item) {
let i = this.items.indexOf(item)
this.items.splice(i, 1)
}
moveItemUp(item) {
let i = this.items.indexOf(item)
if (i === 0) return
let temp = item
this.items.splice(i, 1)
this.items.splice(i - 1, 0, temp)
}
moveItemDown(item) {
let i = this.items.indexOf(item)
if (i === this.items.length) return
let temp = item
this.items.splice(i, 1)
this.items.splice(i, 0, temp)
}
}