Ember博客应用 #

ember new blog-app
cd blog-app
ember install ember-cli-mirage

// app/router.js
Router.map(function () {
  this.route('home', { path: '/' });
  this.route('posts', function () {
    this.route('new');
    this.route('show', { path: '/:post_id' });
    this.route('edit', { path: '/:post_id/edit' });
  });
  this.route('login');
  this.route('register');
});

// app/models/post.js
import Model, { attr, belongsTo, hasMany } from '@ember-data/model';

export default class PostModel extends Model {
  @attr('string') title;
  @attr('string') body;
  @attr('string') excerpt;
  @attr('date') createdAt;
  @attr('date') updatedAt;
  @attr('boolean') isPublished;
  @belongsTo('user') author;
  @hasMany('comment') comments;

  get formattedDate() {
    return this.createdAt?.toLocaleDateString('zh-CN');
  }
}

// app/models/user.js
import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') name;
  @attr('string') email;
  @attr('string') avatar;
}

// app/models/comment.js
import Model, { attr, belongsTo } from '@ember-data/model';

export default class CommentModel extends Model {
  @attr('string') body;
  @attr('date') createdAt;
  @belongsTo('user') author;
  @belongsTo('post') post;
}

// app/routes/posts.js
import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  model() {
    return this.store.query('post', {
      filter: { isPublished: true },
      include: 'author',
      sort: '-createdAt',
    });
  }
}

// app/routes/posts/show.js
import Route from '@ember/routing/route';

export default class PostsShowRoute extends Route {
  model(params) {
    return this.store.findRecord('post', params.post_id, {
      include: 'author,comments.author',
    });
  }
}

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

export default class PostCardComponent extends Component {
  get excerpt() {
    const body = this.args.post.body || '';
    return body.length > 150 ? body.substring(0, 150) + '...' : body;
  }
}

{{! app/components/post-card.hbs}}
<article class="post-card">
  <LinkTo @route="posts.show" @model={{@post.id}}>
    <h2 class="post-title">{{@post.title}}</h2>
  </LinkTo>
  <p class="post-excerpt">{{this.excerpt}}</p>
  <footer class="post-meta">
    <span class="author">{{@post.author.name}}</span>
    <span class="date">{{@post.formattedDate}}</span>
  </footer>
</article>

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

export default class PostFormComponent extends Component {
  @tracked title = this.args.post?.title || '';
  @tracked body = this.args.post?.body || '';
  @tracked isPublished = this.args.post?.isPublished || false;

  @action
  async submit(event) {
    event.preventDefault();

    const postData = {
      title: this.title,
      body: this.body,
      isPublished: this.isPublished,
    };

    if (this.args.onSubmit) {
      await this.args.onSubmit(postData);
    }
  }
}