Событие checkChange в пользовательском элементе множественного выбора

Question

У меня есть multiselect-dropdown.html со своими собственными .js, а также edit-user.html со своими собственными .js.

Я пытаюсь заставить его вызвать функцию в edit-user.html, когда я нажимаю флажок или элемент списка в multiselect-dropdown.html.

Мне кажется, что документам по Аурелии не хватает информации.

Я не думаю, что мне нужно вставлять js-файлы, мне просто нужно руководство о том, как вызвать функцию в edit-user.html из элемента списка в multiselect-dropdown.html это возможно? некоторые подсказки помогут.

<template>
  <div class="dropdown">
    <button id="${baseId}" 
            class="dropdown-toggle form-control input" 
            type="button" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false">
      <span class="multiselect-dropdown-selection">${textCaption}</span>
      <span class="caret"></span>
    </button>

    <ul class="dropdown-menu input" 
        aria-labelledby="${baseId}" 
        click.trigger="preventDropDownClose($event)">
      <li if.bind="!disableOriginal">
        <a>
          <label>
            <input 
              type="checkbox" 
              id="multiselect-dropdown-select-default" 
              checked.bind="isSelectOriginal"> 
            ${textSelectOriginal}
          </label>
        </a>
      </li>

      <li>
        <a>
          <label>
            <input 
              type="checkbox" 
              id="multiselect-dropdown-select-all" 
              checked.bind="isSelectAll">
            ${textSelectAll}
          </label>
        </a>
      </li>

      <li role="separator" class="divider"></li>

      <li repeat.for="option of options" onmousedown=>
        <a>
          <label>
            <input // This should send a trigger to a function in edit-user.html
              type="checkbox" 
              class="multiselect-dropdown-option"
              checked.bind="option.checked"> ${option.name}        
          </label>
        </a>
      </li>
    </ul>
  </div>
</template>

Вот мультивыбор в edit-user.html, как мне вызвать функцию в edit-user.html, если в multiselect-dropdown.html?

был установлен или снят флажок

    <div class="form-group user-multiselect-dropdown">
      <label for="address" class="regular-15-25">Mina valda adresser</label>
      <multiselect-dropdown 
        options.bind="selectedAddresses"
        noun-singular="adress"
        noun-plural="adresser">
      </multiselect-dropdown>
    </div>

Answer 1

Ответ Джесси - один из двух подходящих подходов к этому. Другой подход - отправить CustomEvent из вашего пользовательского элемента и подписаться на него из представления, которое использует пользовательский элемент.

Внутри multiselect-dropdown.js:

// without your JS it's hard to assume what you need, but here's the gist of it
// assuming this method is called in some way in response to a change
onSelectionChanged() {
    const detail = {
        component: this, // include whatever information the consuming view needs
    };
    const event = new CustomEvent('select', { bubbles: true, detail });
    this.el.dispatchEvent(event); // assuming this.el is the injected Element instance
}

В edit-user.html:

<multiselect-dropdown select.trigger="handleSelect($event)">
</multiselect-dropdown>

В edit-user.js:

handleSelect($event) {
    const detail = $event.detail;
    // do stuff with detail.component or whichever info you included
    return false; // stops the event from bubbling further up
}

Как видите, с точки зрения .call по сравнению с отправкой настраиваемого события, они во многом совпадают с точки зрения того, какие проблемы вы можете с ними решить.

Мое личное предпочтение для вызовов, которые происходят от событий DOM, состоит в том, чтобы сохранять их как события. Это позволяет вам приблизиться к естественному способу работы с HTML, когда вам нужно передать изменения дальше по дереву DOM.

.call, с другой стороны, приводит к уменьшению количества создаваемых объектов и слушателей и может привести к повышению производительности (в частности, к уменьшению использования памяти) в очень больших приложениях. Это также дает вам меньше беспокойства с точки зрения очистки / отмены распространения и тому подобного.

У обоих есть свое время и место, используйте то, что имеет смысл в вашей ситуации.

Answer 2

Вам необходимо привязать функцию к вашему <multiselect-dropdown>, используя атрибут .call, например:

<multiselect-dropdown function-name.call="checkboxChanged()"></multiselect-dropdown>

Вы можете привязать это к вашей модели представления multiselect-dropdown следующим образом:

@bindable()
public functionName: () => void; // or without typing if you don't use typescript

Запомните регистр имени функции; в HTML то, что вы разделяете с помощью тире (-), является верблюжьим в вашей модели представления, например, function-name становится functionName

Теперь вам просто нужно вызывать эту функцию в вашей модели представления при каждом изменении флажка. Вы можете observe значение флажка с помощью декоратора @observable и вызывать функцию всякий раз, когда она изменяется. Если вы хотите наблюдать свойство объекта, вам нужно использовать bindingEngine.

import { bindable, observable, bindingEngine, autoinject } from "aurelia-framework";

@autoinject
export class Foo {
  @bindable()
  public functionName: () => void;

  @observable()
  public checkboxValue: boolean;

  public option = {
    checked: true;
  }

  constructor(private bindingEngine: BindingEngine) {}

  attached() {
    // subscribe to an object property
    this.subscription = this.bindingEngine.propertyObserver(this.option, "checked").subscribe(() => {
       this.functionName();
    }
  }

  detached() {
    // Dispose subscription to avoid memory leak
    this.subscription.dispose();
  }

  // Observe a single field for changes
  checkboxValueChanged() {
    this.functionName();
  }
}