Inline SVG - Part 2

components.clickable-svg.js

import Ember from 'ember'

const {
  Component
} = Ember

export default Component.extend()

controllers.application.js

import Ember from 'ember'

const {
  Controller,
  computed,
  get,
  set
} = Ember

export default Controller.extend({
  appName: 'Ember Inline SVG - Part 2',

  init() {
    let image = get(this, 'store').createRecord('image', {
      url: 'https://hbrysiewicz.com/assets/img/ember.svg'
    })
    
    for (let i = 0; i < 70; i++) {
			get(this, 'store').createRecord('location', { image })
    }
    
		let models = get(this, 'store').peekAll('location')
    set(this, 'models', models)
  }
})

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

models.location.js

import DS from 'ember-data'

const {
  Model,
  belongsTo
} = DS

export default Model.extend({
  image: belongsTo('image')
})

templates.application.hbs

<style>
	body {
  	background-color: #9a9a9a;
  }
</style>
{{#each models as |model|}}
	{{clickable-svg model=model}}
{{/each}}

templates.components.clickable-svg.hbs

{{{model.image.svg}}}

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-ajax": "2.5.6",
    "ember-data": "2.12.1",
    "ember-concurrency": "0.8.1"
  }
}