Javascript Ember.js-在表格中填充模型时使用自动索引（把手模板）

我想在我的车把模板中使用自动编号1,2,3填充路线模型，而不是像图中那样使用自动生成的db id，因为删除记录时这些都会弄乱，问题是车把中不再支持@index

---

---

我的路线：

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

我的控制器：

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');
      }
   }
});

我的模型和重新适应

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>

模板

<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>

职位列表
增加新员额

指数
标题
作者
身体
删除
{{{#各}
{{{#链接到'post'this}
{{title}}
{{/链接到}
{{作者}
{{body}}
{{/每个}}
{{outlet}}

更新的浏览器输出

---

您可以使用

\u view.contentIndex

获取循环中的当前索引。但是，它是以零为基础的，因此它将计数为0、1、2。这可以很容易地用一个车把助手来修复，它只需在值上加1。

使用CSS计数器，而不是乱搞余烬之类的东西。旧的

\u 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>

---

根据您的建议，Trid-{{{#链接到'post'此}{{{{{u view.contentIndex}}{{/link to}}不会打印任何内容。没有输出。我只是从上周开始学习余烬。我仍然无法查看或使用ArrayController或其他相关功能。伙计，这让我更加困惑：D.为什么作为一个很棒的框架，Ember忽略了handlebar中那些非常简单的@index。我以为余烬什么都有了。你们真棒，敬礼：D。这是表中所有关于自动索引的问题中最好的答案，也是最简单的

<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>