Javascript 更改Aurelia中的数组顺序，奇怪的行为_Javascript_Aurelia

Javascript 更改Aurelia中的数组顺序，奇怪的行为

javascript aurelia

Javascript 更改Aurelia中的数组顺序，奇怪的行为,javascript,aurelia,Javascript,Aurelia,我试图构建一个自定义元素来管理简单列表，重命名项目并更改其顺序。不幸的是，我注意到一些奇怪的行为，实际上很难确定在输入中键入似乎不会被识别为Aurelia更新项目的更改当在页面加载后键入/更改一个项目，然后通过这些方法更改其在数组中的位置时，该项目的索引似乎丢失（变为-1）。如果未通过输入字段更改该项，则数组中的索引将被正确识别并进行排序数组、绑定甚至子元素是否存在任何已知问题？为了获得期望的行为，经过战斗测试的方法是什么？非常感谢父元素 ... <list items.bi

我试图构建一个自定义元素来管理简单列表，重命名项目并更改其顺序。不幸的是，我注意到一些奇怪的行为，实际上很难确定

在输入中键入似乎不会被识别为Aurelia更新项目的更改

当在页面加载后键入/更改一个项目，然后通过这些方法更改其在数组中的位置时，该项目的索引似乎丢失（变为-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>

我相信这与字符串的不变性有关。也就是说，字符串不能修改，因此当您修改文本框中的值时，数组元素实际上被替换而不是修改。这就是为什么你会失去装订

下面是一个要点，它演示了在绑定到对象列表时如何正确工作

我认为这与字符串的不变性有关。也就是说，字符串不能修改，因此当您修改文本框中的值时，数组元素实际上被替换而不是修改。这就是为什么你会失去装订

下面是一个要点，它演示了在绑定到对象列表时如何正确工作

重复。for

有几个上下文变量可供利用

演示要点：

当前项目的正确位置可以通过使用
```
$index
```
上下文变量而不是
```
items.indexOf（item）
```
来确定
通过将
```
item
```
传递到
```
items.slice（newIndex，item）
```
将保留输入的数据绑定值

如果您需要观察阵列的变化，CollectionObserver可能非常适合这样做。更多详细信息请参见：

list.js

从“aurelia框架”导入{bindable，bindingMode}；
导出类列表{
@可绑定（{defaultBindingMode:bindingMode.twoWay}）项；
构造函数（）{}
附加项（）{
this.items.push（`newitem${this.items.length+1}`）；
}
删除项目（i）{
本条第1条拼接（i，1）；
}
moveItemUp（一，项目）{
如果（i==0）
返回；
此项（i，i-1，项）；
}
向下移动项目（i，项目）{
if（i==this.items.length-1）
返回；
此项。移动项（i，i+1，项）；
}
moveItem（旧索引、新索引、项目）{
本.项目.拼接（旧索引，1）；
此.items.splice（newIndex，0，item）；
}
}

list.html


| 
| 
| 
添加项

重复。for

有几个上下文变量可供利用

演示要点：

当前项目的正确位置可以通过使用
```
$index
```
上下文变量而不是
```
items.indexOf（item）
```
来确定
通过将
```
item
```
传递到
```
items.slice（newIndex，item）
```
将保留输入的数据绑定值

如果您需要观察阵列的变化，CollectionObserver可能非常适合这样做。更多详细信息请参见：

list.js

从“aurelia框架”导入{bindable，bindingMode}；
导出类列表{
@可绑定（{defaultBindingMode:bindingMode.twoWay}）项；
构造函数（）{}
附加项（）{
this.items.push（`newitem${this.items.length+1}`）；
}
删除项目（i）{
本条第1条拼接（i，1）；
}
moveItemUp（一，项目）{
如果（i==0）
返回；
此项（i，i-1，项）；
}
向下移动项目（i，项目）{
if（i==this.items.length-1）
返回；
此项。移动项（i，i+1，项）；
}
moveItem（旧索引、新索引、项目）{
本.项目.拼接（旧索引，1）；
此.items.splice（newIndex，0，item）；
}
}

list.html


| 
| 
| 
添加项

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

}