Question

我遇到了一些非常奇怪的事情。我选择并选择了多个元素。当我第一次使用表单加载页面，并更改选择倍数中的选定选项时，它不会将新值绑定到选择倍数中的变量（尽管如果它只是选择而不是多个，它会正确绑定）。但是，如果我在需要更新表单中的数据的页面上执行某些操作（例如，我按下Revert，从db中加载表单中的数据），它将开始绑定选择多个中的新选定选项。我很困惑

例如：

<select multiple class="form-control input-sm" value.bind="workers">
    <option repeat.for="option of selectors.worker" model.bind="option.value" disabled.bind="option.disabled">
      ${option.name}
    </option>
  </select>
  ${workers}

如果我更改所选选项

，则不会更新

$ {workers}

Answer 1

文档说要将model.bind用于选择倍数。因此，选择应该是这样的：

<select multiple='multiple' value.two-way="selectedThings" style="width: 100%">
   <option repeat.for="thing of things" model.bind="thing">${thing.name}</option>
</select>

但是，selectedThings中的更改似乎没有反映在视图中。我相信这是因为aurelia在内部设置绑定值的方式。我们应该等待团队的回答，以了解为什么会发生这种情况。与此同时，我可以使用脏检查selectedThings的getter属性来解决这个问题。像这样：

get myThings() {
   return this.selectedThings.map(thing => thing.name).join(',');
   //or just return this.selectedThings
}

正在运行示例：https://gist.run/?id=5a9c5cda449bfe3789a58122372a0a20

修改

如果你想使用select2，你可以操纵select2自定义属性中的所有内容。像这样：

自定义属性

import {inject} from 'aurelia-dependency-injection'; import {customAttribute} from 'aurelia-templating'; import {DOM} from 'aurelia-pal'; import {TaskQueue} from 'aurelia-task-queue'; @inject(DOM.Element, TaskQueue) @customAttribute('ddl') export class Select2CustomAttribute { constructor(element, taskQueue) { this.element = element; this.taskQueue = taskQueue; } bind(bindingContext) { this.bindingContext = bindingContext; } attached() { this.taskQueue.queueMicroTask(() => { this.create(); }); } create() { //Object.assign(defaultOpts, this.options); $(this.element).select2() .on('change', (evt) => { if (evt.originalEvent) { return; } this.element.dispatchEvent(new Event('change', { bubbles: true })); //reset value to avoid multiple-select problems let value = this.bindingContext[this.element.getAttribute('value.bind')]; this.bindingContext[this.element.getAttribute('value.bind')] = []; this.bindingContext[this.element.getAttribute('value.bind')] = value; }); } }

<强> USAGE

<require from="./select2-attribute"></require> <select style="width: 200px;" ddl value.bind="selectedValue" change.delegate="valueChanged()" multiple> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>

运行示例：https://gist.run/?id=2189fda060e77e3f735ce59528df79b8

如果你需要动态选项，你必须再次销毁和创建select2或类似的东西（如果你愿意，我有一些例子）。

Aurelia选择多个不绑定值而select选择

1 个答案:

修改