I'm experimenting with Sproutcore and am trying to use SVG (Standard Vector Graphics) within the sproutcore app. I need to be able to "draw" on a canvas of some kind, to display elements like lines, boxes, images. SVG has it all. My Idea was to include the SVG-Image using a StaticContentView:
svg: SC.StaticContentView.design({
classNames: ['my-static-content-view'],
content: "<svg version='1.1' width='970' height='219'> \
<image id='someimage' x='410.5' y='122' width='25' height='25' xlink:href='"+static_url('/resources/layout/someimage.png')+"'></image> \
</svg>",
tagName: 'section'
})
That works great so far, the svg-image is displayed inside the app, the subimage gets loaded too. Now my problem: I want to be able to manipulate the svg-image at runtime, add new nodes and bind sproutcore-events to the different nodes. For example: When the someimage up in the codesnippet gets clicked I want an event to be triggered. I figured I could bind events using
SC.Event.add(someelement, "click", someHandler);
But I need to be able to access the svg-DOM-node, the "someimage", in order to bind the event to it. I have googled and tried jQuery using $('someimage').get(0) and many other methods but nothing seems to work.
Can anybody give me a hint on how to access the element? Am I maybe doing it wrong using StaticContentView in the first place? Can I maybe build the SVG as a native Sproutcore-Element or View to make things easier?
It was actually quite easy, I'm a little ashamed I opened a new thread for this because that usually means I'm completely lost.
Solution: As mentioned above it's easy to bind sproutcore events to objects at runtime (e.g. when new DOM elements are added at runtime to make them trigger a sproutcore event) using
My problem was how to access the DOM-element. It turns out the common jQuery-function $() works on views too. I just had to call it directly on the StaticContentView, plus I forgot the # (duh). So in my example above it's possible to get the someimage-DOM-element with the following code:
Note that svg in the code above is the StaticContentView and not the svg-HTML-element inside the StaticContentView. I just realized that could be a little tricky to retrace.
So the complete code, executed somewhere inside your sproutcore app "App" with the mainPane containing only the StaticContentView "svg", looks like this:
Hope someone runs into the same problems and saves some time reading this.
Something else: When the svg-view is not the topmost view on your pane it can be really handy to make use of the SC.outlet-method. Take a look here.