Search code examples
ractivejs

component's onchange event not triggered

I'm guessing that this might be intentional but couldn't find mention in the docs. (If it's intentional, I'll make a PR to clarify the docs).

ref: this jsfiddle

my html:

<div id='container'/>

and my javascript:

Person = Ractive.extend({
  template : '<p>{{name}}</p>',
  onchange : function(obj){console.log(obj)}
})

flintstones = new Ractive({
  el : '#container',
  template : "{{#names}}<person/>{{/}}",
  data : {names : [{id:1, name:"Fred"},{id: 2, name:"Barney"}]},
  components : {person : Person}
})

if I make a data change in the component with:

flintstones.findAllComponents('person')[1].set('name','Wilma')

there is no 'onchange' event logged to the console. However if the flintstones Ractive instance is configured with an 'onchange' handler, then setting the data in the component is logged.

Intentional or bug or am I doing something wrong here?

Solution

  • The onchange event is only fired for data owned (introduced by) the component instance.

    Use this.observe(...) the be notified about changes to any data used within the component regardless of where the data originated.