Search code examples
ractivejs

ractive.observe('*') is causing a RangeError: Maximum call stack size exceeded

Basically I have a "parent-ractive-view" that takes in a decorator, That decorator would then create another ractive-view, and observe all of it's viewModelData, if I use view.observe('*') (with some special template syntax) then I get an error.

I really don't know how to explain this without an example

(Tested in Mac OS 10.10 Chrome 38.0.2125.111)

  • Open this link: http://codepen.io/anon/pen/VYwLOp
  • Open your developer tools console
  • Click on "John Smith"
  • See a Uncaught RangeError: Maximum call stack size exceeded in the console

If you saw the example, keep reading

Ways to avoid seeing the error

(also mentioned in the example's source as comments)

If you do not use view.observe('*', callback)

at all or even use a space-separated name the properties to observe, instead of using the global wildcard, *, i.e. view.observe('prop1.* prop2 prop3.*'), the error does not occur.

if you modify this line this line, the error does not occur, what is wrong with this line O.o

(only look at that first parenthese)

FROM 
    <div class="{{#if (karma * age) >= 1}}transparent-90{{else}}transparent 25{{/if}}">karma: {{karma}}, age: {{age}} </div>
TO 
    <div class="{{#if (karma + 1) >= 1}}transparent-90{{else}}transparent 25{{/if}}">karma: {{karma}}, age: {{age}} </div>
OR-TO (weird) 
    <div class="{{#if (5 * age) >= 1}}transparent-90{{else}}transparent 25{{/if}}">karma: {{karma}}, age: {{age}} </div>

What I initially thought, and turned out to be wrong

(something is not breaking the PatternObserver.update recursive call)

  • There are some circular references from the decorator's scope to Ractive.defaults.data, so I removed all default properties.

  • Collision of namespace between parent-view and decorator-view, nope, I changed property names

Solution

  • Potentially a ractivejs bug, Meanwhile, don't use (a * b) for multiplication, use ( a / (1/b) )

    follow this thread, https://github.com/ractivejs/ractive/issues/1472