Question

I can create a simple model like so:

define(["models/base/model"], function(Model) {
  "use strict";

  var IssueModel = Model.extend({
    defaults:{
      lastName: "Bob",
      firstName: "Doe"
    }
  });
  return IssueModel;
});

And then from my controller I can do this:

this.model = new IssueModel();

And then when I create my view I can pass it my model like so:

this.view = new IssueView({model: this.model});

Finally, in my template I can successfully get properties on the model by doing this:

Hi {{firstName}} {{lastName}}

But when I define a collection using IssueModel and I try to pass the collection to my view (and not the model like I showed previously) I can't figure out how to reference the models in my Handlebars template:

var self = this;
this.collection = new IssueCollection();
this.collection.fetch({
  success: function(collection) {
    self.view = new IssueView({collection: collection});
    console.log(self.collection);
  },
  error: function(collection, error) {
    // The collection could not be retrieved.
  }
});

I know fetch properly retrieves 5 models from my Parse.com backend because this is what I get on the console:

Console output for collection

My question is this. I know Chaplin.js uses getTemplateData, but when I pass a model I don't have to do anything special in order to reference the properties in my view. How would I reference, specifically iterate, over the collection I passed to my view in my Handlebars template?

{{#each [Model in the collection I passed to the view]}}
  {{title}}
{{/each}}
Was it helpful?

Solution

Chaplin will render a collection using a CollectionView, it's basicly an extention of a normal view that listens for changes in your collection and adds/removes subviews accordingly.

this.view = new IssueCollectionView({collection: this.collection});

Also there is no need to wait for success call when using a collection view since it will automaticly render every child item when data is added.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top