javascript - Ember.js - 在表中填充模型时使用自动索引( Handlebars 模板)

Question

我想在我的 Handlebars 模板中使用自动编号 1,2,3 填充路线的模型，而不是使用如图所示的自动生成的数据库 ID，因为删除记录时这些会变得困惑，问题是 @index 不存在 Handlebars 的支撑时间更长。

<小时/>

<小时/>

我的路线:

App.PostsRoute = Ember.Route.extend({
  model: function() {
     return this.store.find('post');
  }
);

我的 Controller :

App.PostsController = Ember.ObjectController.extend({
   actions: {
      delete: function(post) {
        post.deleteRecord();
        post.get('isDeleted'); // => true
        post.save(); // => DELETE to /posts/1
      },

      adNewPost: function() {
         this.transitionToRoute('new');
      }
   }
});

我的模型和 RESTAdapter

App.Post = DS.Model.extend({
   postId: DS.attr('string'),
   title: DS.attr('string'),
   author: DS.attr('string'),
   body: DS.attr('string')
});

App.ApplicationAdapter = DS.RESTAdapter.extend({
   namespace: 'emberpostsrest/api'
});

我的模板:

<script type="text/x-handlebars" id="posts">
<h1>Posts List</h1>

<button {{action 'addNewPost' }}>Add New Posts</button>
<p></p>

<table border="1">
  <tr>
    <th scope="col">Index</th>
    <th scope="col">Title</th>
    <th scope="col">Author</th>
    <th scope="col">Body</th>
    <th scope="col">Delete</th>
  </tr>

  {{#each model}}
    <tr>
      <td>
        {{#link-to 'post' this}}
          {{id}} //<---- HOW TO ADD AN AUTO INDEX HELPER HERE (1,2,3, ETC
                 //      AND NOT USING MODEL'S ID
        {{/link-to}}
      </td>
      <td>{{title}}</td>
      <td>{{author}}</td>
      <td>{{body}}</td>
      <td><a href="" {{action 'delete' this}}>X</a></td>
    </tr>
  {{/each}}
</table>

<div>
  {{outlet}}
</div>

<小时/>

更新了建议的答案:D

CSS

table {
   counter-reset: id;
}

.id-column:before {
   counter-increment: id; 
   content: counter(id);
}

模板

<script type="text/x-handlebars" id="posts">
<h1>Posts List</h1>

<button {{action 'addNewPost' }}>Add New Posts</button>
<p></p>

<table border="1">
  <tr>
    <th scope="col">Index</th>
    <th scope="col">Title</th>
    <th scope="col">Author</th>
    <th scope="col">Body</th>
    <th scope="col">Delete</th>
  </tr>

  {{#each}}
    <tr>
      <td class="id-column">
      </td>
      <td>
        {{#link-to 'post' this}}
          {{title}}
        {{/link-to}}
      </td>
      <td>{{author}}</td>
      <td>{{body}}</td>
      <td><a href="" {{action 'delete' this}}>X</a></td>
    </tr>
  {{/each}}
</table>

<div>
  {{outlet}}
</div>

更新后的浏览器输出

Answer 1

使用 CSS 计数器，而不是摆弄 Ember 的东西。旧的 _view.contentIndex 方法似乎存在一些问题，这可能是由于 Ember 最近的更改造成的。基本方法如下:

<table>
  {{! headers }}
  {{#each model}}
  <tr>
    <td class="id-column">
      {{#link-to 'post' this}}
        {{id}} //<---- HOW TO ADD AN AUTO INDEX HELPER HERE (1,2,3, ETC
               //      AND NOT USING MODEL'S ID
      {{/link-to}}
    </td>

table {
  counter-reset: id;
}
.id-column:before {
  counter-increment: id; 
  content: counter(id);
}