添加到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的空白條目

回答

相關問題