Ember组件通信 #

┌─────────────────────────────────────────────────────────┐
│                      父组件                              │
│                    (数据源)                              │
├─────────────────────────────────────────────────────────┤
│         │                              ▲                │
│         │ 数据向下                      │ 动作向上       │
│         ▼                              │                │
│   ┌───────────┐                  ┌───────────┐         │
│   │  子组件A   │                  │  子组件B   │         │
│   └───────────┘                  └───────────┘         │
│                                                         │
└─────────────────────────────────────────────────────────┘

// app/components/user-card.js
import Component from '@glimmer/component';

export default class UserCardComponent extends Component {
  get displayName() {
    return this.args.user?.name || '匿名用户';
  }
}

{{! app/components/user-card.hbs}}
<div class="user-card">
  <h3>{{this.displayName}}</h3>
  <p>{{@user.email}}</p>
</div>

{{! 父组件使用}}
<UserCard @user={{@currentUser}} />

{{! 字符串}}
<Alert @message="操作成功" />

{{! 数字}}
<Progress @percent={{80}} />

{{! 布尔值}}
<Modal @visible={{true}} />

{{! 对象}}
<UserProfile @user={{this.user}} />

{{! 数组}}
<List @items={{this.items}} />

{{! 函数}}
<Button @onClick={{this.handleClick}} />

// app/components/todo-item.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TodoItemComponent extends Component {
  @tracked isEditing = false;

  @action
  deleteItem() {
    if (this.args.onDelete) {
      this.args.onDelete(this.args.todo);
    }
  }

  @action
  toggleComplete() {
    if (this.args.onToggle) {
      this.args.onToggle(this.args.todo);
    }
  }
}

{{! app/components/todo-item.hbs}}
<div class="todo-item">
  <input
    type="checkbox"
    checked={{@todo.completed}}
    {{on "change" this.toggleComplete}}
  />
  <span>{{@todo.title}}</span>
  <button type="button" {{on "click" this.deleteItem}}>删除</button>
</div>

{{! 父组件}}
<TodoItem
  @todo={{todo}}
  @onDelete={{this.deleteTodo}}
  @onToggle={{this.toggleTodo}}
/>

{{! 使用fn绑定参数}}
<button {{on "click" (fn @onDelete @todo)}}>
  删除
</button>

{{! 等价于}}
<button {{on "click" (fn this.deleteItem)}}>
  删除
</button>

@action
deleteItem() {
  this.args.onDelete?.(this.args.todo);
}

// app/components/tabs.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TabsComponent extends Component {
  @tracked activeIndex = 0;

  @action
  setActive(index) {
    this.activeIndex = index;
  }
}

{{! app/components/tabs.hbs}}
<div class="tabs">
  <div class="tabs-header">
    {{#each @tabs as |tab index|}}
      <button
        type="button"
        class="tab {{if (eq this.activeIndex index) "active"}}"
        {{on "click" (fn this.setActive index)}}
      >
        {{tab.label}}
      </button>
    {{/each}}
  </div>
  <div class="tabs-content">
    {{yield this.activeIndex this.setActive}}
  </div>
</div>

{{! 使用组件}}
<Tabs @tabs={{this.tabList}} as |activeIndex setActive|>
  <p>当前激活: {{activeIndex}}</p>
  <button {{on "click" (fn setActive 0)}}>切换到第一个</button>
</Tabs>

{{! app/components/form.js}}
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class FormComponent extends Component {
  @tracked values = {};

  getFieldValue(name) {
    return this.values[name] ?? '';
  }

  setFieldValue(name, value) {
    this.values = { ...this.values, [name]: value };
  }
}

{{! app/components/form.hbs}}
<form ...attributes>
  {{yield
    (hash
      field=(component "form-field" form=this)
      values=this.values
      submit=(fn this.handleSubmit)
    )
  }}
</form>

{{! 使用}}
<Form as |form|>
  <form.field @name="email" @label="邮箱" @type="email" />
  <form.field @name="password" @label="密码" @type="password" />
  <button {{on "click" form.submit}}>提交</button>
</Form>

// app/controllers/posts.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class PostsController extends Controller {
  @tracked selectedPostId = null;

  get selectedPost() {
    return this.model.find((post) => post.id === this.selectedPostId);
  }

  @action
  selectPost(post) {
    this.selectedPostId = post.id;
  }
}

{{! app/templates/posts.hbs}}
<div class="posts-layout">
  <PostList @posts={{@model}} @selectedId={{this.selectedPostId}} @onSelect={{this.selectPost}} />
  <PostDetail @post={{this.selectedPost}} />
</div>

// app/services/selection.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class SelectionService extends Service {
  @tracked selectedId = null;

  select(id) {
    this.selectedId = id;
  }

  clear() {
    this.selectedId = null;
  }
}

// app/components/post-list.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class PostListComponent extends Component {
  @service selection;

  @action
  selectPost(post) {
    this.selection.select(post.id);
  }
}

// app/components/post-detail.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class PostDetailComponent extends Component {
  @service selection;

  get selectedPost() {
    return this.args.posts.find((post) => post.id === this.selection.selectedId);
  }
}

// app/services/theme.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class ThemeService extends Service {
  @tracked current = 'light';

  toggle() {
    this.current = this.current === 'light' ? 'dark' : 'light';
  }
}

// 任意组件中使用
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class ThemeToggleComponent extends Component {
  @service theme;
}

<button {{on "click" this.theme.toggle}}>
  切换主题 (当前: {{this.theme.current}})
</button>

// app/components/theme-provider.js
import Component from '@glimmer/component';

export default class ThemeProviderComponent extends Component {
}

{{! app/components/theme-provider.hbs}}
{{yield (hash theme=@theme toggle=@onToggle)}}

{{! 使用}}
<ThemeProvider @theme={{this.theme}} @onToggle={{this.toggleTheme}} as |ctx|>
  <Header>
    <ThemeToggle @theme={{ctx.theme}} @onToggle={{ctx.toggle}} />
  </Header>
  <Main>
    <Content @theme={{ctx.theme}} />
  </Main>
</ThemeProvider>

// app/services/events.js
import Service from '@ember/service';
import Evented from '@ember/object/evented';

export default class EventsService extends Service.extend(Evented) {
  emit(event, data) {
    this.trigger(event, data);
  }

  onEvent(event, callback) {
    this.on(event, callback);
  }

  offEvent(event, callback) {
    this.off(event, callback);
  }
}

// 发送事件
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class PublisherComponent extends Component {
  @service events;

  @action
  publish() {
    this.events.emit('data-updated', { id: 123 });
  }
}

// 接收事件
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class SubscriberComponent extends Component {
  @service events;

  constructor(owner, args) {
    super(owner, args);
    this.events.onEvent('data-updated', this.handleUpdate);
  }

  willDestroy() {
    this.events.offEvent('data-updated', this.handleUpdate);
    super.willDestroy(...arguments);
  }

  @action
  handleUpdate(data) {
    console.log('收到更新:', data);
  }
}

{{! 好的做法}}
<Input
  @value={{this.searchTerm}}
  @onChange={{this.updateSearchTerm}}
/>

{{! 避免 - 双向绑定}}
<Input @value={{this.searchTerm}} />

{{! 回调函数使用 on 前缀}}
<Button @onClick={{this.handleClick}} />
<Modal @onClose={{this.closeModal}} />
<Input @onChange={{this.handleChange}} />

{{! 布尔属性使用 is/has 前缀}}
<Alert @isVisible={{true}} />
<Card @hasShadow={{true}} />

// 好的做法 - 全局状态使用服务
@service session;
@service theme;
@service notifications;

// 避免 - 局部状态使用服务
// 如果状态只在少数组件间共享，考虑状态提升

/**
 * UserCard 组件
 * 
 * @param user - 用户对象
 * @param size - 卡片大小
 * @param onEdit - 编辑回调
 * @param onDelete - 删除回调
 */
interface UserCardSignature {
  Args: {
    user: User;
    size?: 'small' | 'medium' | 'large';
    onEdit?: (user: User) => void;
    onDelete?: (user: User) => void;
  };
}