Ember Modifier修饰符 #

ember generate modifier autofocus

app/modifiers/autofocus.js
tests/integration/modifiers/autofocus-test.js

// app/modifiers/autofocus.js
import { modifier } from 'ember-modifier';

export default modifier(function autofocus(element, positional, { delay = 0 }) {
  setTimeout(() => {
    element.focus();
  }, delay);
});

{{! 使用Modifier}}
<input {{autofocus}} />

{{! 带参数}}
<input {{autofocus delay=100}} />

// app/modifiers/tooltip.js
import Modifier from 'ember-modifier';
import { tracked } from '@glimmer/tracking';

export default class TooltipModifier extends Modifier {
  @tracked tooltip;

  modify(element, [text], { position = 'top' }) {
    this.tooltip = this.createTooltip(element, text, position);
  }

  createTooltip(element, text, position) {
    const tooltip = document.createElement('div');
    tooltip.className = `tooltip tooltip-${position}`;
    tooltip.textContent = text;
    tooltip.style.display = 'none';

    element.appendChild(tooltip);

    element.addEventListener('mouseenter', () => {
      tooltip.style.display = 'block';
    });

    element.addEventListener('mouseleave', () => {
      tooltip.style.display = 'none';
    });

    return tooltip;
  }

  remove() {
    if (this.tooltip) {
      this.tooltip.remove();
    }
  }
}

<button {{tooltip "点击提交表单" position="bottom"}}>
  提交
</button>

// app/modifiers/autofocus.js
import { modifier } from 'ember-modifier';

export default modifier(function autofocus(element, [condition = true], { delay = 0 }) {
  if (!condition) return;

  const timeoutId = setTimeout(() => {
    element.focus();
  }, delay);

  return () => clearTimeout(timeoutId);
});

{{! 始终聚焦}}
<input {{autofocus}} />

{{! 条件聚焦}}
<input {{autofocus @isOpen}} />

{{! 延迟聚焦}}
<input {{autofocus delay=500}} />

// app/modifiers/click-outside.js
import { modifier } from 'ember-modifier';

export default modifier(function clickOutside(element, [callback]) {
  function handleClick(event) {
    if (!element.contains(event.target)) {
      callback(event);
    }
  }

  document.addEventListener('click', handleClick);

  return () => {
    document.removeEventListener('click', handleClick);
  };
});

<div {{click-outside this.closeDropdown}}>
  {{! 下拉菜单内容}}
</div>

// app/modifiers/scroll-into-view.js
import { modifier } from 'ember-modifier';

export default modifier(function scrollIntoView(element, [shouldScroll], { behavior = 'smooth', block = 'start' }) {
  if (shouldScroll) {
    element.scrollIntoView({ behavior, block });
  }
});

<div {{scroll-into-view @shouldScroll behavior="smooth" block="center"}}>
  目标内容
</div>

// app/modifiers/on-key.js
import { modifier } from 'ember-modifier';

export default modifier(function onKey(element, [key, callback], { event = 'keydown' }) {
  function handleKey(e) {
    if (e.key === key) {
      callback(e);
    }
  }

  document.addEventListener(event, handleKey);

  return () => {
    document.removeEventListener(event, handleKey);
  };
});

<div {{on-key "Escape" this.closeModal}}>
  {{! 模态框内容}}
</div>

// app/modifiers/style.js
import { modifier } from 'ember-modifier';

export default modifier(function style(element, [], styles) {
  Object.entries(styles).forEach(([property, value]) => {
    element.style[property] = value;
  });
});

<div {{style color=this.textColor backgroundColor=this.bgColor}}>
  内容
</div>

// app/modifiers/class.js
import { modifier } from 'ember-modifier';

export default modifier(function classModifier(element, [], classMap) {
  Object.entries(classMap).forEach(([className, condition]) => {
    if (condition) {
      element.classList.add(className);
    } else {
      element.classList.remove(className);
    }
  });
});

<div {{class active=this.isActive disabled=this.isDisabled}}>
  内容
</div>

// app/modifiers/chart.js
import Modifier from 'ember-modifier';
import Chart from 'chart.js/auto';

export default class ChartModifier extends Modifier {
  chart;

  modify(element, [config], { type = 'line' }) {
    this.destroyChart();

    this.chart = new Chart(element, {
      type,
      data: config.data,
      options: config.options,
    });
  }

  destroyChart() {
    if (this.chart) {
      this.chart.destroy();
    }
  }

  remove() {
    this.destroyChart();
  }
}

<canvas {{chart this.chartConfig type="bar"}}></canvas>

// app/modifiers/trix-editor.js
import Modifier from 'ember-modifier';
import 'trix';
import 'trix/dist/trix.css';

export default class TrixEditorModifier extends Modifier {
  modify(element, [], { value, onChange }) {
    element.value = value || '';

    if (onChange) {
      element.addEventListener('trix-change', (e) => {
        onChange(e.target.value);
      });
    }
  }
}

<trix-editor {{trix-editor value=@content onChange=this.handleContentChange}}></trix-editor>

// app/modifiers/in-viewport.js
import Modifier from 'ember-modifier';

export default class InViewportModifier extends Modifier {
  observer;

  modify(element, [callback], { threshold = 0.5, rootMargin = '0px' }) {
    this.observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          callback(entry.isIntersecting, entry);
        });
      },
      { threshold, rootMargin }
    );

    this.observer.observe(element);
  }

  remove() {
    if (this.observer) {
      this.observer.disconnect();
    }
  }
}

<div {{in-viewport this.onVisibilityChange threshold=0.5}}>
  {{! 懒加载内容}}
</div>

{{! 事件监听}}
<button {{on "click" this.handleClick}}>
  点击
</button>

{{! 带选项}}
<input {{on "input" this.handleInput capture=true passive=true}} />

{{! 多个事件}}
<div
  {{on "mouseenter" this.handleMouseEnter}}
  {{on "mouseleave" this.handleMouseLeave}}
>
  悬停区域
</div>

{{! 函数绑定}}
<button {{on "click" (fn this.delete @item.id)}}>
  删除
</button>

{{! 部分应用}}
<button {{on "click" (fn this.update "status" "active")}}>
  激活
</button>

{{! 阻止默认行为}}
<form {{on "submit" (prevent-default this.handleSubmit)}}>
  <button type="submit">提交</button>
</form>

{{! 阻止事件冒泡}}
<div {{on "click" this.handleOuterClick}}>
  <button {{on "click" (stop-propagation this.handleInnerClick)}}>
    内部按钮
  </button>
</div>

// 好的做法 - 清理事件监听
export default modifier(function resize(element, [callback]) {
  window.addEventListener('resize', callback);
  return () => window.removeEventListener('resize', callback);
});

// 避免 - 不清理
export default modifier(function resize(element, [callback]) {
  window.addEventListener('resize', callback);
  // 没有清理，可能导致内存泄漏
});

export default modifier(function tooltip(element, [text], { position = 'top' }) {
  if (!text) {
    console.warn('tooltip modifier requires text');
    return;
  }

  // 创建tooltip...
});

export default class ActiveModifier extends Modifier {
  modify(element, [isActive]) {
    if (isActive) {
      element.classList.add('active');
    } else {
      element.classList.remove('active');
    }
  }
}

// tests/integration/modifiers/autofocus-test.js
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, focus } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Modifier | autofocus', function (hooks) {
  setupRenderingTest(hooks);

  test('it focuses the element', async function (assert) {
    await render(hbs`
      <input id="first" />
      <input id="second" {{autofocus}} />
    `);

    assert.dom('#second').isFocused('second input should be focused');
  });

  test('it respects delay option', async function (assert) {
    await render(hbs`
      <input {{autofocus delay=50}} />
    `);

    // 等待延迟
    await new Promise((resolve) => setTimeout(resolve, 100));

    assert.dom('input').isFocused();
  });
});

// app/modifiers/autofocus.js - 自动聚焦
// app/modifiers/autoselect.js - 自动选择文本
export default modifier(function autoselect(element) {
  element.select();
});

// app/modifiers/submit-on-enter.js - 回车提交
export default modifier(function submitOnEnter(element, [callback]) {
  function handleKeydown(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      callback();
    }
  }
  element.addEventListener('keydown', handleKeydown);
  return () => element.removeEventListener('keydown', handleKeydown);
});

// app/modifiers/draggable.js - 拖拽
// app/modifiers/resizable.js - 调整大小
// app/modifiers/sticky.js - 粘性定位

// app/modifiers/fade-in.js - 淡入
export default modifier(function fadeIn(element, [duration = 300]) {
  element.style.opacity = '0';
  element.style.transition = `opacity ${duration}ms`;

  requestAnimationFrame(() => {
    element.style.opacity = '1';
  });
});