models-image.js

import DS from 'ember-data'
import Ember from 'ember'
import { task } from 'ember-concurrency'

const {
  Model,
  attr,
  belongsTo
} = DS

const {
  String: { htmlSafe },
  computed,
  get,
  inject: { service },
  set
} = Ember

export default Model.extend({
  ajax: service(),
  
  url: attr('string'),
  
  svg: computed('url', '_svg', 'getSvg.isRunning', function() {
    let url = get(this, 'url')
    let svg = get(this, '_svg')
    let isRunning = get(this, 'getSvg.isRunning')
    
    // This is not an svg
    if (!url || !url.match(/\.svg$/)) {
      return null
    }
    
    if (!svg && !isRunning) {
      get(this, 'getSvg').perform(url)
    }
    
    return svg
  }),
  
  getSvg: task(function* (url) {
    yield get(this, 'ajax').request(url, {
      dataType: 'text'
    }).then((response) => {
      set(this, '_svg', htmlSafe(response))
    })
  })
})