添加到Ember Data的空白条目

我目前在学习EmberJS，因为我觉得使用JS框架和使用后端API的单页应用程序是事情将会发生变化的方式。我最近学到了Laravel，没有任何问题，但我发现Ember非常困难。添加到Ember Data的空白条目

我经历过的大部分问题，但我有一个，我甚至不知道如何调试。

本质上，我的界面显示客户端列表。点击一个名字就去那个客户端。所有这些都连接到一个基于PHP/Laravel的API，这个API运行得非常好，并且格式正确。数据不是这里的问题。

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

此基本功能似乎不能正常工作。当用户点击客户端链接时，它会导航到客户端。但是它将一个空行添加到客户端列表页面，然后进入客户端页面。返回到客户端页面显示额外的空白行，如果再次点击，同样的事情会重复出现。

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

我已经在这里发布了代码。这应该是所有必要的。这种行为是年轻球员常见的陷阱，我做过一些不寻常的事情吗？

道歉的长度，只是不想省略相关的东西。

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

来源

2014-02-24 Matt Burgess

这听起来像您的适配器没有正确序列化数据。您可以发布您在从“客户”路线导航到“客户”时获得的网络响应吗？ –

我不确定你指的是什么，但我假设的东西像Chrome开发工具的网络标签？如果有一个特定于烬的工具，请告诉我。它所说的就是GET/api/clients - 200 OK 值得注意的是它永远不会说GET/api/clients/2/...不知道这是否意味着什么。 –

此外，我修改了API和Ember，使其不再使用上面提到的哈希。我现在使用一个标准的整数ID来简化任何可能会导致我的问题的约定。它没有什么区别。 –

好吧，只是继续这个，因为我已经有点儿修好了。

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

这条线比我想象的要多。我认为它更像是一个定义的占位符，就像在Laravel一样。

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

使用的名称，无论是{ID}或{哈希}或{} 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}}大部分工作，但得到的bug在OP说明。我相信一个错误已经让我花了三天时间来修复。

来源

2014-02-25 14:59:55

添加到Ember Data的空白条目

回答

相关问题