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)
}
}