Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add items collection #1638

Merged
merged 4 commits into from
Oct 25, 2017
Merged

Add items collection #1638

merged 4 commits into from
Oct 25, 2017

Conversation

tomgreenfield
Copy link
Contributor

@tomgreenfield tomgreenfield commented Jul 6, 2017

@oliverfoster
Copy link
Member

@lc-thomasberger what do you think?

@danielstorey
Copy link
Member

danielstorey commented Aug 8, 2017

I just started to test this using a new component for which I originally used itemsModel.

I understand the benefit of using a collection but now it feels a bit more laboured now as I can no longer use a single handlebars template to iterate over _items or refer to specific indices, and am having to write extra functions and create new templates in order to perform a simple initial render.

The issue is that .toJSON() returns a shallow copy of the model's attributes property and so _items remains a collection instance rather than being converted into an object literal readable by handlebars. Can we therefore redifine this method on the itemsComponentModel ie

toJSON: function() {
    var json = _.clone(this.attributes);
    json._items = this.get('_items').toJSON();
    return json;
},

With maybe some defensive programming to ensure we can call toJSON on the items collection.

You can see this is a simple extension of the original Backbone method here: https://github.com/jashkenas/backbone/blob/master/backbone.js#L439-L441

@oliverfoster
Copy link
Member

Sounds fine to me. Need anything else?

@danielstorey
Copy link
Member

Everything else works great!

},

checkCompletionStatus: function() {
if (this.areAllItemsCompleted()) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return early?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha, I think defiite overkill / needless expansion for single-line if statements. Only an issue if dealing with multiple nested lines and/or actions after the conditional.

var items = this.get('_items');
var collection = new Backbone.Collection(null, { model: ItemModel });

items.forEach(function(item, index) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could actually call .map() here and call the Collection add() with an array of items after.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you write out the code? my brain has gone to sleep... :/

Copy link
Member

@brian-learningpool brian-learningpool Aug 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like this:

var items = items.map(function(item, index) {
  item._index = index;
  return item;
});

collection.add(items);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't make use of the array returned by calling .map so .forEach could still be used. If immutability is desirable though
var items = items.slice().map(
would prevent mutation

Also since there's now only one .add call why not just use

var collection = new Backbone.Collection(items, { model: itemModel })

After the array has been mapped.

Sorry for the lack of MD I'm on a phone currently.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point.

},

reset: function(type, force) {
this.get('_items').each(function(item) { item.reset(); });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be more readable on a single line if we were using arrow functions.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:O * gasp *

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't do that with IE 11 still in the mix though. :-/

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need to have a chat with you about that kind of stuff.

@oliverfoster
Copy link
Member

could you all re-+1 this so it can go in?

Copy link
Member

@brian-learningpool brian-learningpool left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job, @tomgreenfield. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants