title: Pulling JSON subarray items into a template in Backbone
body: <p>a question fron a total Backbone newbie:</p>
  
  <p>I want to pull items from a JSON subarray and place them in a specific spot on my template. I'm not sure how to target those specific items.</p>
  
  <p>The subarray is represented in the code below: it's the two arrays named images:</p>
  
  <pre><code>(function () {
  
  //JSON object containing gallery content
  var galleries = [
  { name: 'Renovations', images: [
      '../img/Galleries/01/pic01.jpg',
      '../img/Galleries/01/pic02.jpg'
      ]
  },
  { name: 'Kitchens', images: [
      '../img/Galleries/01/pic03.jpg',
      '../img/Galleries/01/pic04.jpg'
      ]
  }
  ];
  
  //Gallery Class...this is a Backbone Model
  var Gallery = Backbone.Model.extend({
   initialize: function(){
      console.log('this gallery is up and running');
  }
  });
  
  
  //A collection...also a class &amp; the 'C' in MVC in this case
  var SingleGallery = Backbone.Collection.extend({
  model: Gallery,
  parse: function(response){
     return response.items;
     console.log(response.items);
  }
  });
  
  //A view...also a class
  var GalleryGroup = Backbone.View.extend({
  tagName: 'article',
  className: 'contact-container',
  template: $('#galleryTemplate').html(),
  render: function () {
      var tmpl = _.template(this.template);
      this.$el.html(tmpl(this.model.toJSON()));
      return this;
  }
  });
  
  //Another view...also a class
      var GalleryView = Backbone.View.extend({
  el: document.getElementById('container'),
  initialize: function () {
      this.collection = new SingleGallery(galleries);
      this.render();
  },
  render: function () {
      var that = this;
          _.each(this.collection.models, function (item) {
          that.renderGallery(item);
      }, this);
  },
  renderGallery: function (item) {
      var galleryView = new GalleryGroup({
          model: item
      });
      this.$el.append(galleryView.render().el);
  }
  });
  
  var gal1 = new GalleryView();
  
  } ());
  </code></pre>
  
  <p>My template looks like this so far:</p>
  
  <pre><code>&lt;script id="galleryTemplate" type="text/template"&gt;
  &lt;p&gt;&lt;h1&gt;&lt;%= name %&gt;&lt;/h1&gt;
  &lt;div&gt;&lt;img src='&lt;%= images %&gt;' /&gt;&lt;/div&gt;&lt;/p&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>If I only had one image to load into &lt;%= images %> section, this would be easy, but I would like to construct a well-formatted JSON object and be able to find each individual item in the two 'images' arrays. I want to think that fetch() is the way to go but I'm not sure...any ideas?</p>
  
  <p>Thanks in advance.
  is</p>