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

Question

我想在车手模板中使用自动编号1,2,3来填充路线的模型，而不是像图中那样使用自动生成的数据库标识，因为当记录被删除时，这些问题会变得很糟糕，问题是@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'); 
     } 
    } 
}); 

我的模型和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); 
} 

Answer 2

您可以使用_view.contentIndex得到在循环中的当前索引。但是，它是基于零的，所以它会计算0,1,2。这可以很容易地通过使用手柄助手来修复，该助手只是将值加1。