Question

I have embedded a big svg in a template view. All svg elements have id’s corresponding to guid’s of records in a sproutcore datastore.
Now I have a ‘selected’ boolean porperty on each record.

I want to adjust the corresponding svg element of a record whenever the ‘selected’ property toggles between True and False. The view should reflect changes to the slected property of a record.

I can’t figure out how to set up the bindings/observes to do this. If i would built the svg with sc for each record myself i know how to set up the bindings. But I don’t know how to build bindings when you already have a svg.

model code:

App.Node = SC.Record.extend(
   name : SC.Record.attr(String),
   value : SC.Record.attr(String),
   selected: SC.Record.attr(Boolean),
}),

view code:

App.svg_picture = SC.View.design({

  childViews: 'svgpicture'.w(),

   layout: { left:12, right:12, top:12, bottom:12},

   svgpicture: SC.TemplateView.create({
   /**
   * settings.
   */
   templateName: 'svgtest2',
   nodeBorderColorSel: '#FFB60B',
   nodeColorSel: 'yellow',

   /**
    * Event handling code.
    */
   ....

svg.handlebar example:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="manifold" xmlns:xlink="http://www.w3.org/1999/xlink"  >
tank_1</text>
<circle cy="25" cx="70" r="20" id="tank_1"  strokewidth:5; fill:none; "  />

<circle cy="25" cx="120" r="20" id="tank_10" strokewidth:5; fill:none; "  />
<circle cy="25" cx="170" r="20" id="tank_11" strokewidth:5; fill:none; "  />
... etc...

Answer 1

What worked for me was adding observers to objects myself.

 node.addObserver('selected', this, 'update_node_selected');

node is a Record. now I manually add an observer on the selected property executing ‘update_node_selected’ function on this. which gets a target parameter which is the object and in my case a record.