Search code examples
javascriptractivejs

Ractive 'Consider initialising your data to eliminate the ambiguity' issue

I have a object that's passed to my Ractive component via binding like this:

<Component obj={{someObject}} />

and in Component i've got the following oninit method defined:

oninit: function () {
  this.set('someObjectClone', JSON.parse(JSON.stringify(this.get('someObject'))));
}

However using someObjectClone for two-way binding a <input> element in my template results in a warning saying:

Ractive.js: The 'someObjectClone.someValue' reference being used for two-way binding is ambiguous, and may cause unexpected results. Consider initialising your data to eliminate the ambiguity

and if i just try to print the value without using two-way binding it prints nothing. As if the value isn't set at all. But if i do console.log(this.get()) in my oninit i can see that it has been set. Is the DOM not updating?

Could anybody fill me in on this?

I'm using Ractive 0.8.0-edge and i set up a JSFiddle here

Regards,

Solution

  • In your example event is set to some in the component parameters:

    <Component event="{{some}}"/>

    And you copy that object to the clone path:

    this.set('clone',  JSON.parse(JSON.stringify(this.get('event'))) );

    So in your template, use {{clone.value}}.

    As to the ambiguous ref warning, set a default value in your data so that Ractive knows the value is to be found at the root of the component (see http://jsfiddle.net/kjj6s709/6/):

    data: {
    clone: null
},