jquery 更改事件和 aurelia 的技术

Question

我需要找到一个可靠的解决方案来让这两个框架很好地发挥作用。

使用 materialize-css，他们的 select 元素使用 jquery 来应用值更改。然而，这并不会触发 aurelia 看到变化。使用...的技术 $("select") .change((eventObject: JQueryEventObject) => { fireEvent(eventObject.target, "change"); }); 我可以触发 aurelia 看到的事件，但是，aurelia 然后在更新它的绑定时导致事件再次被触发，我最终陷入无限循环......堆栈溢出：D

在这方面让两者一起玩最可靠的方法是什么？

Answer 1

我使用 materialize-css + aurelia 已经有一段时间了，我可以确认来自 materialize 的 select 元素是相当有问题的。

我只是想在这里分享我的一个解决方案，以防有人需要更多示例。在这种情况下，Ashley's 可能更清洁。我的选项使用可绑定而不是插槽。

除了基本思想是相同的（使用保护变量和微任务）。

我在处理 3rd 方插件和双向数据绑定方面学到的一个教训是，它有助于在处理源自绑定目标（DOM 上的选择元素）的更改和更改之间进行更清晰、更明显的分离源自绑定源（例如包含该元素的页面的 ViewModel）。

我倾向于使用名称为 onValueChangedByBindingSource 和 onValueChangedByBindingTarget 的更改处理程序来处理将 ViewModel 与 DOM 同步的不同方式，从而减少代码混乱。

示例：https://gist.run?id=6ee17e333cd89dc17ac62355a4b31ea9

src/material-select.html

<template>
    <div class="input-field">
        <select value.two-way="value" id="material-select">
            <option repeat.for="option of options" model.bind="option">
                ${option.displayName}
            </option>
        </select>
    </div>
</template>

src/material-select.ts

import {
    customElement,
    bindable,
    bindingMode,
    TaskQueue,
    Disposable,
    BindingEngine,
    inject,
    DOM
} from "aurelia-framework";

@customElement("material-select")
@inject(DOM.Element, TaskQueue, BindingEngine)
export class MaterialSelect {
    public element: HTMLElement;
    public selectElement: HTMLSelectElement;

    @bindable({ defaultBindingMode: bindingMode.twoWay })
    public value: { name: string, value: number };

    @bindable({ defaultBindingMode: bindingMode.oneWay })
    public options: { displayName: string }[];

    constructor(
        element: Element,
        private tq: TaskQueue,
        private bindingEngine: BindingEngine
    ) {
      this.element = element;
    }

    private subscription: Disposable;
    public isAttached: boolean = false;
    public attached(): void {
        this.selectElement = <HTMLSelectElement>this.element.querySelector("select");
        this.isAttached = true;

        $(this.selectElement).material_select();
        $(this.selectElement).on("change", this.handleChangeFromNativeSelect);

        this.subscription = this.bindingEngine.collectionObserver(this.options).subscribe(() => {
            $(this.selectElement).material_select();
        });
    }

    public detached(): void {
        this.isAttached = false;
        $(this.selectElement).off("change", this.handleChangeFromNativeSelect);
        $(this.selectElement).material_select("destroy");
        this.subscription.dispose();
    }

    private valueChanged(newValue, oldValue): void {
        this.tq.queueMicroTask(() => {
            this.handleChangeFromViewModel(newValue);
        });
    }


    private _suspendUpdate = false;

    private handleChangeFromNativeSelect = () => {
        if (!this._suspendUpdate) {
            this._suspendUpdate = true;
            let event = new CustomEvent("change", {
                bubbles: true
            });
            this.selectElement.dispatchEvent(event)

            this._suspendUpdate = false;
        }
    }

    private handleChangeFromViewModel = (newValue) => {
        if (!this._suspendUpdate) {
            $(this.selectElement).material_select();
        }
    }
}

编辑

自定义属性怎么样？

要点：https://gist.run?id=b895966489502cc4927570c0beed3123

src/app.html

<template>
  <div class="container">
    <div class="row"></div>
    <div class="row">
      <div class="col s12">
        <div class="input-element" style="position: relative;">
          <select md-select value.two-way="currentOption">
            <option repeat.for="option of options" model.bind="option">${option.displayName}</option>
          </select>
          <label>Selected: ${currentOption.displayName}</label>
        </div>
      </div>
      </div>
    </div>
</template>

src/app.ts

export class App {
  public value: string;
  public options: {displayName: string}[];

  constructor() {
    this.options = new Array<any>();
    this.options.push({ displayName: "Option 1" });
    this.options.push({ displayName: "Option 2" });
    this.options.push({ displayName: "Option 3" });
    this.options.push({ displayName: "Option 4" });
  }

  public attached(): void {

    this.value = this.options[1];
  }
}

src/md-select.ts

import {
    customAttribute,
    bindable,
    bindingMode,
    TaskQueue,
    Disposable,
    BindingEngine,
    DOM,
    inject
} from "aurelia-framework";

@inject(DOM.Element, TaskQueue, BindingEngine)
@customAttribute("md-select")
export class MdSelect {
    public selectElement: HTMLSelectElement;

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

    constructor(element: Element, private tq: TaskQueue) {
      this.selectElement = element;
    }

    public attached(): void {
        $(this.selectElement).material_select();
        $(this.selectElement).on("change", this.handleChangeFromNativeSelect);
    }

    public detached(): void {
        $(this.selectElement).off("change", this.handleChangeFromNativeSelect);
        $(this.selectElement).material_select("destroy");
    }

    private valueChanged(newValue, oldValue): void {
        this.tq.queueMicroTask(() => {
            this.handleChangeFromViewModel(newValue);
        });
    }


    private _suspendUpdate = false;

    private handleChangeFromNativeSelect = () => {
        if (!this._suspendUpdate) {
            this._suspendUpdate = true;
            const event = new CustomEvent("change", { bubbles: true });
            this.selectElement.dispatchEvent(event)
            this.tq.queueMicroTask(() => this._suspendUpdate = false);
        }
    }

    private handleChangeFromViewModel = (newValue) => {
        if (!this._suspendUpdate) {
            $(this.selectElement).material_select();
        }
    }
}

Answer 2

好吧，我花了 完全 太长的时间来让这个问题按照我想要的方式回答，但稍后会详细介绍。停止无限循环的实际答案相当简单，所以我们先来看一下。您需要有一个保护属性，并且您需要使用 Aurelia 的TaskQueue 来帮助取消设置保护属性。

您的代码将如下所示：

$(this.selectElement).change(evt => {
  if(!this.guard) {
    this.guard = true;
    const changeEvent = new Event('change');
    this.selectElement.dispatchEvent(changeEvent);
    this.taskQueue.queueMicroTask(() => this.guard = false);
  }
});

请注意，我正在使用排队一个微任务来解除守卫。这样可以确保一切都按照您想要的方式进行。

现在我们已经解决了这个问题，让我们看看我创建的一个要点here。在这个要点中，我创建了一个自定义元素来包装 Materialize 选择功能。在创建这个时，我了解到select 元素和通过slot 元素进行的内容投影不会一起使用。因此，您将在代码中看到我必须做一些编码操作才能将选项元素从虚拟div 元素移动到select 元素中。我将提出一个问题，以便我们可以对此进行调查，看看这是框架中的错误还是仅仅是浏览器的限制。

通常，我强烈建议创建一个自定义元素来包装此功能。考虑到我必须编写的用于随机播放节点的代码，我不能说我强烈建议创建自定义元素。在这种情况下，我只是真的推荐它。

但无论如何，你去吧！