imagePage

application.js

//this .js is supposed be adapters/application.js but I couldn't create an adapter here

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

export default JSONAPIAdapter.extend({

    findAll: function(){
        return Ember.$.getJSON('http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=0&pageSize=15');
    }

});

    

components.image-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  scrollingTimeout: 100,  
  bindScrolling: function() {
    var self = this,
    onScroll = function() {
      Ember.run.debounce(self, self.runScrolled, self.scrollingTimeout);
    };

    Ember.$(document).on('touchmove.scrollable', onScroll);
    Ember.$(window).on('scroll.scrollable', onScroll);
  }.on('didInsertElement'),

  unbindScrolling: function() {
    Ember.$(window).off('.scrollable');
    Ember.$(document).off('.scrollable');
  }.on('willDestroyElement'),

  preservePos: function() {
    console.log(' Preserve Position '+this.get('currentPos'));
    Ember.$(window).scrollTop(this.getWithDefault('currentPos', 0));
  }.on('didInsertElement'),

  runScrolled: function() {
    var position = Ember.$(document).height() - Ember.$(window).scrollTop();
    var viewportHeight = document.documentElement.clientHeight;    
    this.set('currentPos', Ember.$(window).scrollTop());    
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  currentPos:0
});

models.news-list.js

//import Model from 'ember-data/model';
//import attr from 'ember-data/attr';
import DS from 'ember-data';

export default DS.Model.extend({
  
    Id : DS.attr('number'),
    Title : DS.attr('string'),
    Content : DS.attr('string'),
    Image : DS.attr('string'),  
    //ImageBlog : DS.attr(),
    //Image1080x600 : DS.attr(),
    //Image285x300 : DS.attr(),
    //Image340x191 :DS.attr(),
    //Image340xmin340max600 : DS.attr(),
    //Image475x300 : DS.attr(),
    //Image710x500 : DS.attr(),
    //Image760x300 : DS.attr(),
    //CreateDate : DS.attr(),
    //CategoryName : DS.attr(),
    //EditorName : DS.attr(),
    //Type : DS.attr(),
    NewsUrl :DS.attr('string')
    //CategoriUrl : DS.attr(),
    //VerticalImage : DS.attr(),
    //HasPopular : DS.attr(),
    //IsAppNews : DS.attr(),
    //Url : DS.attr(),
    //PreferedTag : DS.attr(),
    //EditorTagUrl : DS.attr(),
    //DateCreated : DS.attr(),
    //ReadCount : DS.attr(),
    //TotalWatch : DS.attr(),
    //IsFollow : DS.attr(),
    //ImgIcon : DS.attr(),
    //ImageHeight : DS.attr(),
    //ImageHeight710 : attr()

});

router.js

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

const Router = Ember.Router.extend({

    location: config.locationType

});

Router.map(function() {
  this.route('index',{path:'/'});
  this.route('pic', {path:'/new/:NewsUrl'});

  this.route('news');
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({

    model() {

        return Ember.$.getJSON('http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=0&pageSize=15');

    }

});

routes.pic.js

import Ember from 'ember';

export default Ember.Route.extend({

    model(params) {

    },
    activate: function() {
    this._super(...arguments);
    window.scrollTo(0,0);
}
 
});

templates.application.hbs

{{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}}

templates.index.hbs

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

templates.pic.hbs

<p class= "back">{{#link-to 'index'}}Anasayfa{{/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'}}Anasayfa{{/link-to}}</p>

{{outlet}}

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}