更改Aurelia中的数组顺序，奇怪的行为 [英] Change Array Order in Aurelia, weird behaviour

问题描述

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

I am trying to build a custom element to manage simple lists, renaming the items and changing their order. Unfortunately I'm noticing some weird behavior that's actually really hard to pin down.

1. 输入输入似乎没有被识别为变化让Aurelia更新项目


2. 在页面加载后输入/更改一个项目然后通过这些方法更改其在数组中的位置时，项目的索引似乎丢失（变为-1） 。如果项目未通过输入字段更改，则数组中的索引将被正确识别并且排序有效。

有没有已知的数组，绑定甚至是子元素的问题？为获得理想的行为而接受过测试的战斗是什么？非常感谢！

Are there any known issues with arrays, binding and maybe even child elements? What are the battle tested approached to get the desired behavior? Thanks a lot!

父元素

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

}

推荐答案

repeat.for 有几个可以利用的上下文变量。 [文档]

repeat.for has several contextual variables you can leverage of. [Documentation]

Gist演示： https://gist.run/?id= 1c8f78d8a774cc859c9ee2b1ee2c97f3

• 当前项目的正确位置可以通过 $ index 上下文变量而不是 items.indexOf（item）。


• 输入的数据绑定值将通过将 item 传递给 items.slice（newIndex，item）<来保留/ code>。



• Current item's correct position can be determined by using $index contextual variable instead of items.indexOf(item).
• Databound values of inputs will be preserved by passing item to items.slice(newIndex, item).

如果需要观察数组更改，CollectionObserver可能非常适合。更多详细信息：观察Aurelia中的对象和阵列 。

If you need to observe array changes, CollectionObserver could be a great fit for that. More details here: Observing Objects and Arrays in Aurelia.

list.js

import { bindable, bindingMode } from 'aurelia-framework';

export class List {

  @bindable({defaultBindingMode: bindingMode.twoWay}) items;

  constructor() {} 

  addItem() {
    this.items.push(`New Item ${this.items.length + 1}`);
  }

  deleteItem(i) {
    this.items.splice(i, 1);
  }

  moveItemUp(i, item) {
    if (i === 0) 
      return;

    this.moveItem(i, i - 1, item);
  }

  moveItemDown(i, item) {
    if (i === this.items.length - 1) 
      return;

    this.moveItem(i, i + 1, item);
  }

  moveItem(oldIndex, newIndex, item) {
      this.items.splice(oldIndex, 1);
      this.items.splice(newIndex, 0, item);
  }

}

list.html

<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($index)"><i class="fa fa-close"></i></a> | 
         <a click.delegate="moveItemUp($index, item)"><i class="fa fa-arrow-up"></i></a> | 
         <a click.delegate="moveItemDown($index, item)"><i class="fa fa-arrow-down"></i></a>
    </div>
    <a click.delegate="addItem()">Add Item</a>
</template>

这篇关于更改Aurelia中的数组顺序，奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！