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。