2015-11-04 24 views
1

我有一個連接到單獨的phoenix API的應用程序應用程序。我使用的是ActiveModelAdapter,並且一切工作都正常,直到我將我的ember版本升級到2.1.0。現在,數據將加載到商店中,但不會顯示在頁面上。我的瀏覽器的控制檯沒有發生任何錯誤,我只是在這一點上難住。我從來沒有使用過這個版本的Ember,所以任何指向正確方向的指針都將非常感謝!將數據加載到存儲中,將不會顯示在頁面

我的適配器:

# app/adapters/application.js 

import DS from 'ember-data'; 
import ActiveModelAdapter from 'active-model-adapter'; 

export default ActiveModelAdapter.extend({ 
namespace: 'v1', 
host: 'http://localhost:4000' 
}); 

我的路由器:

import Ember from 'ember'; 
import config from './config/environment'; 

var Router = Ember.Router.extend({ 
location: config.locationType 
}); 

export default Router.map(function() { 
    this.route('resources', function() { 
    this.route('new'); 
    this.route('resource', { path: '/:resource_id' }); 
    }); 
}); 

我的模型:

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    title: DS.attr('string'), 
    description: DS.attr('string'), 
    url: DS.attr('string'), 
    topic: DS.attr('string') 
}); 

我的控制器:

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    actions: { 
    editResource: function() { 
    this.toggleProperty('isEditing'); 
    }, 
    saveResource: function() { 
    var resource = this.get('model'); 
    resource.save(); 
    this.toggleProperty('isEditing'); 
    }, 
    }, 

    isEditing: false 
}); 

我的索引頁面模板,列出所有資源:

<div class="container col-md-6 col-md-offset-3"> 
    <ul class="list-group"> 
    {{#each resource in model}} 
    <li class="list-group-item active"> 
     {{#link-to 'resources.resource' resource}} 
     <h5>{{resource.title}}</h5> 
    {{/link-to}}</li> 
    <li class="list-group-item"><p>topic: {{resource.topic}}</p></li> 
    <li class="list-group-item"><p>url: {{resource.url}}</p></li> 
    {{/each}} 
    </ul> 
</div> 

這是我在瀏覽器控制檯中看到,當我試圖訪問我的索引頁路線:本地主機:4200 /資源

enter image description here

enter image description here

在餘燼數據檢查,我的四個資源是有的,但不會在頁面上顯示出來。同時,控制檯中沒有錯誤。

再次,任何幫助非常感謝。謝謝!

也如果有人有興趣我回購是在這裏,分支我的工作是單元測試:

https://github.com/SophieDeBenedetto/flybrary-front/tree/unit-tests

UPDATE:感謝@dfreeman我的索引模板現在可以正確渲染,但我顯示頁面渲染一個單獨的模型對象仍是空白:

<div class="well col-sm-4 col-sm-offset-4" style="text-align: center;"  {{bind-attr class="resource.isShowing:show resource.isEditing:editing"}}> 

{{#if model.isEditing}} 
    <input class="edit">{{model.title}} 
    <p class="edit" >{{model.url}}</p> 
    <p class="edit" >topic: {{model.topic}}</p> 
    <p class="edit" >description: {{model.description}}</p> 
{{else}} 
    <h4 class="toggle" {{action "editResource" on="doubleClick"}}>  {{model.title}}</h4> 
    <p class="toggle" {{action "editResource" on="doubleClick"}}> {{model.url}}</p> 
    <p class="toggle" {{action "editResource" on="doubleClick"}}>topic: {{model.topic}}</p> 
    <label class="toggle" {{action "editResource" on="doubleClick"}}>description: {{model.description}}</label> 
    {{/if}} 
    <p>{{#link-to 'resources.resource.edit' model}}Edit{{/link-to}}</p> 
</div> 
+1

你在'show'模板中的'bind-attr'仍然綁定到「resource.isShowing」,我想你想要「model.isShowing」也許?此外,您可以擺脫'bind-attr',並使用更新的綁定動態內容的方法 - http://emberjs.com/deprecations/v1.x/#toc_bind-attr –

回答

0

{{#each x in y}}版本each幫手是removed in Ember 2.0。回到1.10,引入new generalized block syntax代替它。

如果您更改模板以使用新語法,則應該很好。

{{#each model as |resource|}} 
    ... 
{{/each}} 
+0

謝謝@dfreeman!我的索引頁面現在正確地呈現,但我的顯示頁面呈現單個資源對象仍然是空白的。有任何想法嗎?我將在上面原始問題的底部複製並粘貼該模板。 –

+1

@SophieDeBenedetto你的'resources.hbs'必須有'{{outlet}}'來渲染嵌套路由的內容。檢查http://guides.emberjs.com/v2.1.0/routing/defining-our-routes/#toc_index-routes –