Ember.js 添加到余烬数据的空白条目

我目前正在学习EmberJS，因为我觉得使用JS框架和使用后端API的单页应用程序是事情发展的方向。我最近学习了拉威尔，没有任何特别的问题，但我发现余烬非常困难

我的大多数问题我都解决过，但我有一个问题我甚至不知道如何调试

基本上，我的界面显示一个客户机列表。点击一个名字就会进入该客户机。所有这些都连接到一个基于PHP/Laravel的API，该API工作完全正常，格式正确。数据不是这里的问题

也就是说，我应该指出，我的数据并没有严格的id，而是使用更像guid的东西进行连接：912ec803b2而不是231。API就是为了处理这个问题而构建的，这是一个需求。这也意味着数据中没有id，但有一个哈希可能会以某种方式混淆ember

这个基本功能似乎无法正常工作。当用户单击客户端链接时，它会导航到客户端。但是它会在客户列表页面添加一个空行，然后转到客户页面。返回到客户端页面会显示额外的空行，如果再次单击，同样的事情会再次发生

在Chrome中检查Ember inspector显示数据收集正在增加，并添加了空白数据。我不知道为什么

我把代码贴在这里了。这应该是所有必要的。这种行为对年轻球员来说是一个常见的陷阱吗？当然，我做了一些不寻常的事情吗

抱歉这么长，只是不想遗漏一些相关的内容

// app.js

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

App.Router.map(function() {

    this.resource('clients', function() {
        this.route('new');

    });
    this.resource('client', { path: 'clients/:client_hash' }, function(){

    });


});

App.Store = DS.Store.extend({
    url: 'http://myclientinfo'
});

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

App.Client = DS.Model.extend({
    name: DS.attr('string'),
    hash: DS.attr('string')
});

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

App.ClientIndexRoute = Ember.Route.extend({
  model: function(params){
    return this.store.find('client', params.client_hash);
  }
});


// templates

    <script type="text/x-handlebars">

    <div class="container">

      <ul class="nav nav-pills">
        <li>{{#link-to 'clients'}}Clients{{/link-to}}</li>
      </ul>


      {{outlet }}

      </div>
    </script>


  <script type="text/x-handlebars" id="client">
  client outer
  {{outlet}}
  </script>


  <script type="text/x-handlebars" id="clients">
  client outer
  {{outlet}}
  </script>


  <script type="text/x-handlebars" id="client/index">
  client index
  <h1>{{name}}</h1>
  </script>

    <script type="text/x-handlebars" id="clients/index">

  <div class="row">
  <div class="col-md-12 col-lg-12">
  <h1>All Clients</h1>
  </div>
  </div>

  <div class="row"><div class="col-md-12 col-lg-12">
  {{#link-to 'clients.new' class="btn btn-info add-btn"}}
  <i class="fa fa-plus"> Add new client</i>
  {{/link-to}}
  </div></div>

  <div class="row">
  <div class="col-md-12 col-lg-12">

    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>

      <tbody>

      {{#each item in model}}
      <tr>
        <td>{{#link-to 'client' item.hash}}{{item.name}}{{/link-to}}</td>

      </tr>
      {{/each}}

      </tbody>
    </table>


    </div>
    </div>
    </script>

---

好的，我已经把它修好了，就继续往下看

this.resource('client', { path: 'clients/:client_hash' }, function(){

这句话比我想象的要多。我认为它更像是一个定义占位符，就像在拉威尔

Route::get('user/{id}', function($id)

使用的名称，无论是{id}还是{hash}或{poopypants}都无关紧要，因为它当时正在定义和使用

我把它改成这样：

this.resource('client', { path: 'clients/:client_id' }, function(){

这使得默认的助手链接可以正常工作，而不是像我尝试的其他东西一样，简单地不定义它们。该段的名称实际上是有意义的，它用于导出该段的实际值

这样，我就能够稍微重构循环代码，修复助手

{{#each item in model}}
  <tr>
    <td>{{#link-to 'client' item}}{{item.name}}{{/link-to}}</td>

这也可以进一步重构

{{#each}}
<tr>
    <td>{{#link-to 'client' this}}{{name}}{{/link-to}}</td>

---

请注意{{link to'client'this}}可以工作，而{{{link to'client'this.id}大部分可以工作，但是得到了OP中声明的错误。我相信我花了三天的时间来修复这个错误。

这听起来像是适配器没有正确地序列化数据。当你从客户端路径导航到客户端时，你能发布你得到的网络响应吗？我不确定你指的是什么，但我假设类似于Chrome开发工具的网络选项卡？如果有灰烬专用工具，请告诉我。它所说的就是GET/api/clients-200ok，值得注意的是它从来没有说GET/api/clients/2/。。。不确定这是否意味着什么。此外，我修改了API和Ember，使其不再使用上面提到的哈希。我现在使用一个标准的整数ID来简化任何可能导致我的问题的违反约定的行为。是的，网络响应就是我所说的——如果你在使用chrome的“网络”选项卡，点击请求，然后点击右边的“响应”或“预览”选项卡。是的，chrome调试器有一个余烬扩展：