# Best way to attach parent object on can.List items

**URL:** <https://forums.bitovi.com/t/best-way-to-attach-parent-object-on-can-list-items/65>\
**Category:** CanJS\
**Created:** [November 25, 2015, 4:04pm UTC](https://forums.bitovi.com/t/best-way-to-attach-parent-object-on-can-list-items/65 "2015-11-25T16:04:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Macrofig](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/macrofig/32/24_2.png) [@Macrofig](https://forums.bitovi.com/u/Macrofig)\
**Post date:** [November 25, 2015, 4:04pm UTC](https://forums.bitovi.com/t/best-way-to-attach-parent-object-on-can-list-items/65/1 "2015-11-25T16:04:35Z")

</div>

I’m not sure if there’s a better more CanJS-y way of doing this so pardon my ignorance if there is.

When I iterate through a can.List, I need to also be able to access the previous item I iterated on. The best way I could do this was by adding \_parent and \_prevItem properties to each item in the list. I add the \_parent property on init of the can.List. The \_prevItem is a getter that gets the current index and returns the previous item based on that.

This resulted in the creation of this:

```javascript
var PenultimateList = can.List.extend({
  init: function () {}//Adding _parent to all children here
});
PenultimateList.Map = can.Map.extend({
  define: {
    _prevItem: {
      get: function () {}//Returns the previous item by using _parent
    }
  }
});

```

### First Issue

The first issue I run into is with the define property:

```javascript
import PenultimateList from 'PenultimateList';
var Todos = PenultimateList.extend({
  define: {
    name: {
      type: 'string'
    }
  }
});

```

`Todos` will not have the `_prevItem` property I created before. I created a define extender that helps with this but I wondering if I don’t necessarily have to do that.

### Second Issue

If using can-connect, having the `_parent` property causes a [circular reference error with `JSON.stringify`](https://github.com/canjs/can-connect/blob/master/src/helpers/sorted-set-json.js#L13). I worked around this by making \_parent a function instead of a reference. Kinda weird but it works.

### Third Issue

In order for each child to have the correct `_parent`, I create an ‘add’ listener during init that adds the property. Doing this causes can-connect to stop updating the list. (I’m still debugging this so I’ll update post once I get my bearings).

## More info…

Here’s a jsbin that illustrates what I have going now: [http://jsbin.com/foxuva/edit?js,output](http://jsbin.com/foxuva/edit?js,output)

I have two implementations of this in two different projects:

- Project A: can-connect 0.3.3, canjs 2.3.2
- Project B: no can-connect, canjs 2.2.6

Obviously, only Project A has the can-connect issues.

I feel like I’m doing some crazy workaround for can.Map not having access to it’s parent List (if there is one) or the previous item. So, I’m hoping that maybe I’m just crazy and there’s an easier way to get to the parent.

---

<div class="post-metadata">

**Author:** ![Macrofig](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/macrofig/32/24_2.png) [@Macrofig](https://forums.bitovi.com/u/Macrofig)\
**Post date:** [November 25, 2015, 4:32pm UTC](https://forums.bitovi.com/t/best-way-to-attach-parent-object-on-can-list-items/65/2 "2015-11-25T16:32:29Z")

</div>

Soooo… after posting that, I had a thought. I think someone mentioned it to me and it just didn’t register.

I created a block helper that caches the previous item. Doing this avoids all three issues I mentioned. Weeee!

```javascript
      supahList: function (list, opts) {
          var prevItem = false;
          var nextItem = false;
          var resp = [];
          // Loop through each item, add a previous
          // item property and render all the things!
          can.each(list(), function (item) {
              prevItem = nextItem;
              nextItem = item;
              // not comfortable adding the _prevItem property
              // to the item itself but... at least it works.
              item.attr('_prevItem', prevItem);
              var frag = opts.fn(item);
              resp.push(frag.textContent);
          });
          return resp.join(" ");
      }

```

So, for this situation, the helper will suffice. I think I need to tweak it a bit but it should be fine.

---

<div class="post-metadata">

**Author:** ![Macrofig](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/macrofig/32/24_2.png) [@Macrofig](https://forums.bitovi.com/u/Macrofig)\
**Post date:** [November 30, 2015, 11:25pm UTC](https://forums.bitovi.com/t/best-way-to-attach-parent-object-on-can-list-items/65/3 "2015-11-30T23:25:49Z")

</div>

Didn’t like that I was adding a property to the items. I didn’t want to do this but it was the better solution in the end:

```javascript
groupedList: function (list, opts) {
  var prevItem = false;
  var resp = [];
  can.each(list(), function (item) {
    var frag = opts.fn({curItem: item, prevItem: prevItem});
    resp.push(frag);
    prevItem = item;
  });
  return resp;
}

```

Now, in the block, I have two properties, `curItem` and `prevItem`. I didn’t really like this but it seems to be the best overall solution I could come up with.

Now, in the template, I can do:

```auto
{{#groupedList myList}}
  {{#is prevItem.createDate curItem.createDate}}
      Do stuff here!
  {{/is}}
  {{#with curItem}}
    {{createDate}}
  {{/with}}
{{/groupedList}}

```