# How can I observe properties on objects without .attr?

**URL:** <https://forums.bitovi.com/t/how-can-i-observe-properties-on-objects-without-attr/270>\
**Category:** CanJS\
**Created:** [May 16, 2016, 2:50pm UTC](https://forums.bitovi.com/t/how-can-i-observe-properties-on-objects-without-attr/270 "2016-05-16T14:50:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![roemhildtg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/roemhildtg/32/103_2.png) [@roemhildtg](https://forums.bitovi.com/u/roemhildtg)\
**Post date:** [May 16, 2016, 2:50pm UTC](https://forums.bitovi.com/t/how-can-i-observe-properties-on-objects-without-attr/270/1 "2016-05-16T14:50:54Z")

</div>

I’m working with a 3rd party library that doesn’t use .attr to set properties on its objects. So for example, when I use these objects in a Stache template, and do something like `obj.setCount(20);` obj.count gets set to 20, but the stache template doesn’t update because .attr wasn’t used.

Yes, I could do `obj.attr('count', 20)` but in this case, `setCount` needs to be called so that the other library can update its other attributes. Is there a good way to handle this situation?

Cheers.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [May 16, 2016, 3:30pm UTC](https://forums.bitovi.com/t/how-can-i-observe-properties-on-objects-without-attr/270/2 "2016-05-16T15:30:35Z")

</div>

in 2.3, you can do:

```auto
setCount: function(count){
  var oldValue = this.count;
  this.count = count;
  can.batch.trigger(this, "count", count, oldValue);
}

```

You’ll also need to make sure:

- `can.__observe(obj, "count")` is called when reading the count value.
- `bind` and `unbind` are on your object (can you do `can.simpleExtend(obj, can.event)`

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [May 16, 2016, 3:35pm UTC](https://forums.bitovi.com/t/how-can-i-observe-properties-on-objects-without-attr/270/3 "2016-05-16T15:35:59Z")

</div>

In 3.0, it will look like:

```auto
var ObserveInfo = require("can-observe-info");
var canBatch = require("can-event/batch/batch");
var canEvent = require("can-event");
var CID = require("can-util/js/cid/cid");
var assign = require("can-util/js/assign/assign");

var Counter = function(initalCount){
  CID(this);
  this.setCount(initialCount);
}

assign(Counter.prototype, canEvent);
Counter.prototype.getCount = function(){
  ObserveInfo.observe(this, "count");
  return this.count;
}
Counter.prototype.setCount: function(count){
  var oldValue = this.count;
  this.count = count;
  canBatch.dispatch.call(this,"count", [count, oldValue]);
}

```

Of course, you could just do:

```auto
DefineMap = require("can-define/map/map");
Counter = DefineMap.extend({
  count: "number"
})
c = new Counter({count: 5});

c.count //-> 5
c.count = 10;

```

---

<div class="post-metadata">

**Author:** ![roemhildtg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/roemhildtg/32/103_2.png) [@roemhildtg](https://forums.bitovi.com/u/roemhildtg)\
**Post date:** [May 16, 2016, 5:22pm UTC](https://forums.bitovi.com/t/how-can-i-observe-properties-on-objects-without-attr/270/4 "2016-05-16T17:22:22Z")

</div>

Thanks for the quick response! This is helpful to see how 3.0 will handle it also.

In my case, the Counter example would be sort of a “black box” that is generated by a different library. I simplified it for the purpose of the example, but basically I would just need to overwrite the existing setCount with a new one that triggers the event:

2.3:

```javascript
library.counter.prototype = can.simpleExtend(library.counter, can.event);

var counter = new library.counter();
var oldCount = counter.setCount;
counter.setCount = function(count){
    var oldValue = this.count;
    this.count = count;
    //update the template
    can.batch.trigger(this, 'count', count, oldValue);
};
//same thing for getCount using can.__observe

var renderer = can.stache('{{counter.count}}');
can.append(can.$(node), renderer({counter:counter}));

```