javascript - Sproutcore中的SVG，使用Sproutcore访问DOM节点，将sproutcore事件绑定(bind)到DOM

Question

我正在尝试 Sproutcore，并尝试在 sproutcore 应用程序中使用 SVG(标准矢量图形)。我需要能够在某种 Canvas 上“绘图”，以显示线条、方框、图像等元素。 SVG 拥有一切。我的想法是使用 StaticContentView 包含 SVG 图像:

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' 
})

到目前为止效果很好，svg 图像显示在应用程序内，子图像也被加载。现在我的问题是:我希望能够在运行时操作 svg-image，添加新节点并将 sproutcore-events 绑定(bind)到不同的节点。例如:当单击代码片段中的某个图像时，我希望触发一个事件。我想我可以使用

绑定(bind)事件

SC.Event.add(someelement, "click", someHandler);

但是我需要能够访问 svg-DOM-node(“someimage”)，以便将事件绑定(bind)到它。我用 google 搜索并尝试使用 $('someimage').get(0) 和许多其他方法使用 jQuery，但似乎没有任何效果。

任何人都可以给我有关如何访问该元素的提示吗？我一开始使用 StaticContentView 可能做错了吗？我可以将 SVG 构建为原生 Sproutcore-Element 或 View 以使事情变得更容易吗？

Answer 1

您的解决方案可能有效，但不正确。您应该使用鼠标* 事件来实现更改。默认情况下，SproutCore 已经将所有事件附加到您的 View 中，并且当事件发生时，它会检查您是否在 View 上实现了事件函数。

从 mouse* 事件处理程序中，您可以使用 this.$ 通过 CoreQuery 引用当前 View ，并通过类似 jQuery 的方法寻址 svg 元素/canvas 元素。

您的方法不正确的原因是，现在很难将内容的任何更改传递到应用程序的其余部分，而不必编写粘合代码，这是 SproutCore 编写的主要元素之一替换。

我不久前写了一篇博客文章，描述了如何制作自定义 SC.View。虽然它并不完全涉及您想要做的事情，但基本原理或多或少是相同的。

https://mauritslamers.wordpress.com/2013/01/22/how-to-make-a-custom-view-in-sproutcore-html-style/

编辑:忘记博客文章的链接