Aurelia 只能将null或数组实例绑定到multi-select

我正在Aurelia中构建一个多步骤表单，每个页面显示一个问题

我对每个问题都使用相同的视图，if语句确定要显示的表单字段的类型

但是，当我尝试将问题数据绑定到multiple-select元素时，Aurelia抛出错误，并说只能将null或数组实例绑定到multi-select

真正奇怪的是，如果第一个问题是多选问题，我不会得到错误，直到我找到一个非多选问题，然后回到多选问题

我可以通过为这条路线设置activationStrategy:“replace”来解决整个问题，但我真的不想这样

重要守则如下：

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class Form {
  constructor (router) {
    this.router = router;
    this.active = 0;
    this.field = null;
    this.fields = [
      {
        type: 'text',
        value: null
      },
      {
        type: 'select',
        value: [],
        options: [
          'foo',
          'bar'
        ]
      },
      {
        type: 'select',
        value: [],
        options: [
          'foo',
          'bar'
        ]
      },
      {
        type: 'text',
        value: null
      },
    ];
  }

  activate (routeParams) {
    this.active = routeParams.fieldIndex || 0;
    this.active = parseInt(this.active);
    this.field = this.fields[this.active];
  }

  prev () {
    if (typeof this.fields[this.active - 1] !== 'undefined') {
            this.router.navigateToRoute('form', {
                fieldIndex: this.active - 1
            });

            return true;
        }
        else {
            return false;
        }
  }

  next () {
    if (typeof this.fields[this.active + 1] !== 'undefined') {
            this.router.navigateToRoute('form', {
                fieldIndex: this.active + 1
            });

            return true;
        }
        else {
            return false;
        }
  }
}

以及模板：

<template>
  <div class="select" if.bind="field.type == 'select'">
    <select value.bind="field.value" multiple="multiple">
        <option repeat.for="option of field.options" value.bind="option">${option}</option>
    </select>
  </div>

  <div class="text" if.bind="field.type == 'text'">
    <input type="text" value.bind="field.value">
  </div>

  <a click.delegate="prev()">Previous</a> | <a click.delegate="next()">Next</a>
</template>

但是你可能想看看GistRun：为了更好的理解

尝试将第一个问题设置为multiselect，您会注意到错误会消失，直到您返回到它。你也可以像上面提到的那样在app.js中尝试activationStrategy

为什么会发生这种情况？我该如何解决

---

还要注意的是，在我真正的应用程序中，我实际上使用的是compose而不是ifs，但我尝试了两者，两者都产生了相同的错误。似乎在计算if之前绑定了select值，导致出现错误，因为文本字段类型缺少选项数组。

确定，因此交换HTML的顺序，并将select放在输入之后解决了此问题

Jeremy Danyow这样解释：

当Form.field更改时，订阅该属性更改的绑定将按顺序计算。这意味着有一段时间选择和输入都在页面上。html输入元素将null值合并为空字符串，这反过来会导致field.value为空字符串，从而导致多选抛出

很难找到imo，但我很高兴Aurelia开发人员在Github上非常有帮助

---

工作要点：

有点晚，但我想给出一个建议-对于SELECT multi selects，您应该将绑定变量与multi选择器解耦，以防止这些错误

例如，如果在绑定到“selected”的自定义元素中，它们应绑定到：

然后，当实际变量“selected”更改时，如果绑定值是数组，则它仅在自定义元素中更改：

selectedChanged( newV, oldV ){
    if( typeof newV =='object' )
        this.selectedDecoupled = newV;
    else
        this.selectedDecoupled = [];
    $(this.SELECT).val(this.selectedDecoupled ).trigger('change');
}

与自定义select2元素一起使用的示例：

---

我认为问题在于在和元素上使用multiselect和value.bind。我想应该能帮你。这是因为select输入上的value.bind是[n]['value'][]字段中的数组，但它试图绑定到[n]['options']字段中的字符串。@thebluefox感谢您的帮助。但是，我不明白：/n从选项中删除value.bind没有帮助。请注意，该代码在某些情况下运行良好，因此我怀疑实际数据绑定是否有任何错误；不过，我明白这个答案的意义。我只是通过绑定到一个空的测试数组进行测试，该数组不在一个对象中，并且有效。我在激活函数中添加了console.logthis.field.value。最终-所讨论的数组开始包含[\uuuuu array\u observer\uuuuuu:ModifyArrayObserver]——在这一点上它将被忽略。看起来它不再是一个简单的数组了。很公平，但我怀疑这实际上是Aurelia中的一个bug，而不是我的代码。你能不能用你的建议更新一下要点，消除错误？我失败了。你链接到的问题也没有关系。我甚至没有使用对象，而是使用字符串数组。同样，我怀疑数据的实际绑定是否有任何问题。如果是这样的话，它永远不会起作用。现在，它可以正常工作，除了在极少数情况下，您可以在selectinput字段类型之间导航。