ember-cli-sofa index64 example

app-models-collection.js

import { Model, prefix, type, attr, hasMany } from 'sofa';

const {
  computed
} = Ember;

export default Model.extend({

  id: prefix(),

  name: attr(),
  rolls: hasMany('roll', { view: 'by-collection', key: 'docId' }),

  rollsSorting: ['number'],
  sortedRolls: computed.sort('rolls', 'rollsSorting'),

});

app-models-roll-image.js

import { Model, type, prefix, attr, belongsTo } from 'sofa';
import delta from '../util/delta';

const {
  computed
} = Ember;

export default Model.extend({

  id: prefix(),

  number: attr(),
  collection: belongsTo('collection', { inverse: 'images' }),
  roll: belongsTo('roll', { inverse: 'images' }),

  prev: delta('roll.sortedImages', -1),
  next: delta('roll.sortedImages', +1),

});

app-models-roll.js

import { Model, type, prefix, attr, belongsTo, hasMany } from 'sofa';
import delta from '../util/delta';

const {
  computed
} = Ember;

export default Model.extend({

  id: prefix(),

  number: attr(),
  collection: belongsTo('collection', { inverse: 'rolls' }),
  images: hasMany('roll-image', { inverse: 'roll', view: 'by-roll', key: 'docId' }),

  imagesSorting: ['number'],
  sortedImages: computed.sort('images', 'imagesSorting'),

  prev: delta('collection.sortedRolls', -1),
  next: delta('collection.sortedRolls', +1),

});

app-router.js

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

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

Router.map(function() {

  this.route('collections', function() {
    this.route('collection', { path: '/:collection_id' }, function() {
      this.route('rolls', function() {
        this.route('roll', { path: '/:roll_id'}, function() {
          this.route('roll-images', function() {
            this.route('roll-image', { path: '/:roll_image_id'}, function() {
            });
          });
        });
      });
    });
  });

});

export default Router;

app-routes-application.js

import Ember from 'ember';

export default Ember.Route.extend({

  beforeModel() {
    return this.get('store.session').restore();
  }

});

app-routes-collections-collection-rolls-roll-images-roll-image.js

import Ember from 'ember';

export default Ember.Route.extend({

  model(params) {
    return this.get('store.db.main').load('roll-image', params.roll_image_id);
  }

});

app-routes-collections-collection-rolls-roll.js

import Ember from 'ember';

export default Ember.Route.extend({

  model(params) {
    return this.get('store.db.main').load('roll', params.roll_id).then((roll) => {
      return roll.get('images.promise').then(() => roll);
    });
  }

});

app-routes-collections-collection.js

import Ember from 'ember';

export default Ember.Route.extend({

  model(params) {
    return this.get('store.db.main').load('collection', params.collection_id).then((collection) => {
      return collection.get('rolls.promise').then(() => collection);
    });
  }

});

app-sofa-store.js

import { Store } from 'sofa';

export default Store.extend({

  url: '/api',

  databaseNameMapping: {
    main: 'index65_production'
  },

});

app-templates-collections-collection-rolls-roll-roll-index.hbs

<div>
  {{#link-to 'collections.collection' model.collection}}{{model.collection.name}}{{/link-to}} /
  Roll #{{model.number}}
</div>

<div>
{{#if model.prev}}
  {{#link-to 'collections.collection.rolls.roll' model.prev}}Prev{{/link-to}}
{{/if}}
{{#if model.next}}
  {{#link-to 'collections.collection.rolls.roll' model.next}}Next{{/link-to}}
{{/if}}
</div>

{{#if model.images.isFulfilled}}
  {{#each model.images as |image|}}
    {{#link-to 'collections.collection.rolls.roll.roll-images.roll-image' image}}
      <img src="{{image.attachments.x200.url}}"/>
    {{/link-to}}
  {{/each}}
{{else}}
  <div>Loading images…</div>
{{/if}}

notes.md

.. and few more templates

this is it.

util-delta.js

import Ember from 'ember';

const {
  computed
} = Ember;

// prev-next lookup based on arrayKey and this
//
export default function(arrayKey, delta) {
  return computed(arrayKey, function() {
    let array = this.get(arrayKey);
    let proxy = array.findBy('content', this);
    let idx = array.indexOf(proxy);
    return array.objectAt(idx + delta);
  }).readOnly();
}