Question

我有一个包含图片的页面（index.js），当您点击图片时，会打开一个包含更大版本图片及其内容（pic.js）的详细信息页面。当我使用硬编码数据时，我创建了一个服务并将数据放入其中。通过这种方式，单击图片时不会跳过模型钩子。我之所以这样做是因为我的链接是动态{{#link-to}}帮助器，我看到模型钩子在你拥有它时会被跳过。但是现在，我需要使用JSON api从URL获取数据，当我在index.js中执行时，显示它没有问题，但是当我尝试在新选项卡中打开任何链接或粘贴链接时在URL栏中，模型挂钩在pic.js中不起作用。

//routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return Ember.$.getJSON('My jsonApi Url');
    }
});

我读到我需要使用ember-data来修复它。我创建了一个模型“新闻列表”并将属性放入其中。我还创建了一个适配器并从index.js中获取我称之为API的代码并放在那里。

//adapters/application.js

import JSONAPIAdapter from 'ember-data/adapters/json-api';
import Ember from 'ember';

export default JSONAPIAdapter.extend({

    model(params){

        return Ember.$.getJSON('My jsonApi Url',params.NewsUrl);

    }
});

//templates/index.hbs

{{image-list model=model.Data currentPos=currentPos }}
{{outlet}}

//templates/components/image-list.hbs

{{#each model as |pic|}}
  <div>{{#link-to "pic" pic}}    
     <p class="info">{{pic.Title}}</p><br/>
     <img src={{pic.Image}} width="300">
  {{/link-to}}</div> {{/each}}
{{yield}}

//routes/pic.js

import Ember from 'ember'; 
export default Ember.Route.extend({ 
activate: function() { 
this._super(...arguments); 
window.scrollTo(0,0); 
}, 
model() { 
//return this.store.findAll('news-list'); 
} 
});

//templates/pic.hbs
<p class= "back">{{#link-to 'index'}}Home Page{{/link-to}}</p>
<p class="detail"><img src="{{model.Image}}" width="600" ></p>
<p class="content"><br/><br/>{{model.Content}}</p><br/><br/>
<p class= "back">{{#link-to 'index'}}Home Page{{/link-to}}</p>

{{outlet}}

我尝试在return this.store.findAll('news-list');中使用pic.js但是当我点击图片时，我看到的只是一个空白页面。我猜有些东西我不见了。我无法正确使用余烬数据。我该如何解决？

将Ember-data与JSONApi一起使用并在新标签中打开页面

0 个答案: