Ember模板语法 #

{{! 基本if}}
{{#if this.isLoggedIn}}
  <p>欢迎回来！</p>
{{/if}}

{{! if/else}}
{{#if this.isLoggedIn}}
  <p>欢迎回来！</p>
{{else}}
  <p>请先登录</p>
{{/if}}

{{! if/else if/else}}
{{#if this.isAdmin}}
  <p>管理员面板</p>
{{else if this.isEditor}}
  <p>编辑者面板</p>
{{else}}
  <p>用户面板</p>
{{/if}}

{{! unless - if的反向}}
{{#unless this.isPublished}}
  <span class="draft">草稿</span>
{{/unless}}

{{! 等价于}}
{{#if (not this.isPublished)}}
  <span class="draft">草稿</span>
{{/if}}

{{! 内联if助手}}
<span class="status">{{if this.isActive "激活" "未激活"}}</span>

{{! 只有两个参数时}}
<span>{{if this.hasError "错误"}}</span>

{{! 使用and/or/not助手}}
{{#if (and this.isLoggedIn this.hasPermission)}}
  <p>可以访问</p>
{{/if}}

{{#if (or this.isAdmin this.isEditor)}}
  <p>管理权限</p>
{{/if}}

{{#if (not this.isBanned)}}
  <p>正常用户</p>
{{/if}}

{{! 使用eq助手}}
{{#if (eq this.status "active")}}
  <span class="active">活跃</span>
{{/if}}

<ul>
  {{#each @model as |post|}}
    <li>{{post.title}}</li>
  {{/each}}
</ul>

<ol>
  {{#each @model as |post index|}}
    <li>
      <span class="number">{{index}}</span>
      {{post.title}}
    </li>
  {{/each}}
</ol>

<ul>
  {{#each @model as |post|}}
    <li>{{post.title}}</li>
  {{else}}
    <li class="empty">暂无文章</li>
  {{/each}}
</ul>

{{! 遍历对象}}
<dl>
  {{#each-in this.user as |key value|}}
    <dt>{{key}}</dt>
    <dd>{{value}}</dd>
  {{/each-in}}
</dl>

{{#each @categories as |category|}}
  <div class="category">
    <h2>{{category.name}}</h2>
    <ul>
      {{#each category.items as |item|}}
        <li>{{item.name}}</li>
      {{/each}}
    </ul>
  </div>
{{/each}}

{{! 条件class}}
<div class="card {{if this.isActive "active"}}">
  内容
</div>

{{! 多条件class}}
<div class="btn {{this.size}} {{this.type}} {{if this.disabled "disabled"}}">
  按钮
</div>

{{! 使用concat}}
<div class="{{concat "alert-" this.type}}">
  提示信息
</div>

{{! 动态属性值}}
<input type="text" value={{this.inputValue}} />

{{! 动态属性名}}
<div {{prop this.attrName this.attrValue}}></div>

{{! 布尔属性}}
<input type="checkbox" checked={{this.isChecked}} />
<button disabled={{this.isDisabled}}>提交</button>

{{! 内联style}}
<div style="color: {{this.color}}; background: {{this.bgColor}}">
  内容
</div>

{{! 使用html-safe}}
<div style={{this.computedStyle}}>内容</div>

import { htmlSafe } from '@ember/template';

get computedStyle() {
  return htmlSafe(`color: ${this.color}; font-size: ${this.fontSize}px`);
}

{{! 父模板}}
<Card @title="用户信息">
  <p>姓名：{{@user.name}}</p>
  <p>邮箱：{{@user.email}}</p>
</Card>

{{! Card组件}}
<div class="card">
  <div class="card-header">
    <h3>{{@title}}</h3>
  </div>
  <div class="card-body">
    {{yield}}
  </div>
</div>

{{! 父模板}}
<DataTable @data={{@users} as |row|>
  <td>{{row.name}}</td>
  <td>{{row.email}}</td>
  <td>{{row.role}}</td>
</DataTable>

{{! DataTable组件}}
<table>
  <tbody>
    {{#each @data as |row|}}
      <tr>
        {{yield row}}
      </tr>
    {{/each}}
  </tbody>
</table>

{{! 父模板}}
<Layout>
  <:header>
    <h1>页面标题</h1>
  </:header>
  
  <:main>
    <p>主要内容</p>
  </:main>
  
  <:footer>
    <p>页脚信息</p>
  </:footer>
</Layout>

{{! Layout组件}}
<div class="layout">
  <header class="header">
    {{yield to="header"}}
  </header>
  <main class="main">
    {{yield to="main"}}
  </main>
  <footer class="footer">
    {{yield to="footer"}}
  </footer>
</div>

<div {{ref "myDiv"}}>
  内容
</div>

<button {{on "click" (fn this.scrollTo "myDiv")}}>
  滚动到内容
</button>

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  @tracked refs = {};

  @action
  scrollTo(refName) {
    const element = this.refs[refName];
    element?.scrollIntoView({ behavior: 'smooth' });
  }
}

{{! 数组助手}}
{{#each (array "a" "b" "c") as |item|}}
  {{item}}
{{/each}}

{{! 对象助手}}
{{#let (hash name="张三" age=25) as |user|}}
  {{user.name}}
{{/let}}

{{! 字符串拼接}}
{{concat "Hello" " " "World"}}

{{! 动态获取}}
{{get this.user this.fieldName}}

{{! 加法}}
{{add 1 2}}

{{! 减法}}
{{sub 10 3}}

{{! 乘法}}
{{mul 4 5}}

{{! 除法}}
{{div 20 4}}

{{! 取模}}
{{mod 10 3}}

{{! 等于}}
{{eq this.value "expected"}}

{{! 不等于}}
{{not-eq this.value "unexpected"}}

{{! 大于/小于}}
{{gt this.age 18}}
{{gte this.age 18}}
{{lt this.age 60}}
{{lte this.age 60}}

{{! 文本输入}}
<Input
  @type="text"
  @value={{this.name}}
  placeholder="请输入姓名"
  {{on "input" this.validateName}}
/>

{{! 密码输入}}
<Input @type="password" @value={{this.password}} />

{{! 邮箱输入}}
<Input @type="email" @value={{this.email}} />

{{! 数字输入}}
<Input @type="number" @value={{this.age}} min="0" max="150" />

{{! 复选框}}
<label>
  <Input @type="checkbox" @checked={{this.agree}} />
  同意条款
</label>

{{! 单选按钮组}}
{{#each this.options as |option|}}
  <label>
    <Input
      @type="radio"
      @name="gender"
      @value={{option.value}}
      @checked={{eq this.selected option.value}}
    />
    {{option.label}}
  </label>
{{/each}}

<select {{on "change" this.handleChange}}>
  <option value="">请选择</option>
  {{#each this.options as |option|}}
    <option value={{option.value}} selected={{eq this.selected option.value}}>
      {{option.label}}
    </option>
  {{/each}}
</select>

<Textarea
  @value={{this.content}}
  rows="5"
  placeholder="请输入内容"
  {{on "input" this.countCharacters}}
/>
<p>已输入 {{this.charCount}} 字符</p>

{{! 基本链接}}
<LinkTo @route="home">首页</LinkTo>

{{! 带模型参数}}
<LinkTo @route="posts.show" @model={{@post.id}}>
  查看文章
</LinkTo>

{{! 带查询参数}}
<LinkTo @route="posts" @query={{hash page=1 sort="date"}}>
  文章列表
</LinkTo>

{{! 禁用链接}}
<LinkTo @route="home" @disabled={{true}}>禁用链接</LinkTo>

{{! 替换历史记录}}
<LinkTo @route="home" @replace={{true}}>首页</LinkTo>

{{! 动态路由名}}
<LinkTo @route={{this.currentRoute}}>当前页面</LinkTo>

{{! 条件链接}}
{{#if this.canEdit}}
  <LinkTo @route="posts.edit" @model={{@post.id}}>编辑</LinkTo>
{{else}}
  <span class="disabled">无权限编辑</span>
{{/if}}

{{! Ember自动处理Promise}}
{{#each @model as |post|}}
  {{! 数据加载完成后渲染}}
  <p>{{post.title}}</p>
{{/each}}

{{#if this.isLoading}}
  <div class="loading">加载中...</div>
{{else}}
  {{! 显示内容}}
{{/if}}

{{! 输出到控制台}}
{{log "调试信息:" this.user}}

{{! 输出多个值}}
{{log "用户:" this.user "状态:" this.status}}

{{! 断点调试}}
{{debugger}}

{{! 条件断点}}
{{#if this.hasError}}
  {{debugger}}
{{/if}}

{{! 不推荐 - 重复计算}}
<p>{{format-date @post.createdAt}}</p>
<small>{{format-date @post.createdAt}}</small>

{{! 推荐 - 使用let}}
{{#let (format-date @post.createdAt) as |date|}}
  <p>{{date}}</p>
  <small>{{date}}</small>
{{/let}}

{{! 不推荐 - 复杂模板}}
<ul>
  {{#each @items as |item|}}
    <li class="item {{if item.active "active"}}">
      <span class="name">{{item.name}}</span>
      <span class="price">{{item.price}}</span>
      {{! 更多复杂结构...}}
    </li>
  {{/each}}
</ul>

{{! 推荐 - 组件化}}
<ul>
  {{#each @items as |item|}}
    <ItemRow @item={{item}} />
  {{/each}}
</ul>