My array data type does not work with Ember data

Context: I am building a recipe app using Ember frontend + Rails API. In my backend recipe model I am storing an array of image_urls (as well as some other data as strings). Ember data is happy to add the strings to the store, but of course cannot handle an 'array' data type out of the box. I created an array transform to attempt to get around this, but I don't think my transform is even being called. In any event my imageUrl data attribute returns as undefined.

Here is what the project looks like:

//Recipe model

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  cookTime: DS.attr('string'),
  yield: DS.attr('string'),
  servings: DS.attr('string'),
  imageUrls: DS.attr('array'),

  ingredients: DS.hasMany('ingredient'),

});

// Transforms/array.js

import DS from 'ember-data';

export default DS.Transform.extend({
  deserialize: function(serialized) {
    return (Ember.typeOf(serialized) == "array") ? serialized : [];
  },

  serialize: function(deserialized) {
    var type = Ember.typeOf(deserialized);
    if (type == 'array') {
        return deserialized
    } else if (type == 'string') {
        return deserialized.split(',').map(function(item) {
          return jQuery.trim(item);
        });
    } else {
      return [];
    }
  }
});

And here is what the JSON looks like:

recipes: [{id: 14, name: "laudantium reprehenderit est", cook_time: "166 minutes", image_urls: ["http://ift.tt/1Noimjy",…]},...]

I know Ember doesn't make it easy to go against convention, but I would still like to get this approach working. An alternative might be to send the image_urls as relational data so I can create a hasMany relationship between my recipe and images, but this also doesn't seem like a great fit. Any ideas on what's wrong with my code or another approach to solve this?