Search code examples
javascriptjavascript-objectsractivejs

Ractive.js view not updating when reference object changes

My problem is best described in the http://jsfiddle.net/shrekuntu/ek2m25cj/7/

//--ractive code in jsfiddle

I have a list of 'workstations' and clicking on a workstation sets a ractive object 'current_ws' for editing. If I change the name of the 'current_ws' it does not show it in the list of workstations. I think the 'workstation' object updates in memory, it just does not reflect the change on the screen in the list. How can I make it so it updates?

Thanks

Solution

  • Ractive needs more than object reference equality to "know" the values refer to the same thing. The upside is that once you make the link you don't need an javascript to connect them.

    With 0.7 (latest), use a keypath and a current index instead of an object reference (see http://jsfiddle.net/ek2m25cj/8/):

    {{#workstations:i}}
    <li on-click='set( "current", i )'>{{name}} ({{departments[department_id].name}})</li>
{{/workstations}}
</ul>
{{#if current != null}}
<div>
    Name:<input type="text" value="{{ workstations[current].name}}">
</div>
{{/if}}

    With the next version of Ractive 0.8 edge, you can use the link method to utilize a separate object reference (see github PR):

    {{#workstations:i}}
    <li on-click='link( "current", this )'>{{name}} ({{departments[department_id].name}})</li>
{{/workstations}}
</ul>
{{#if current}}
<div>
    Name:<input type="text" value="{{ current.name }}">
</div>
{{/if}}