SVG в Sproutcore, доступ к узлам DOM с помощью Sproutcore, привязка событий sproutcore к DOM

Я экспериментирую со Sproutcore и пытаюсь использовать SVG (стандартную векторную графику) в приложении sproutcore. Мне нужно иметь возможность «рисовать» на каком-либо холсте, чтобы отображать такие элементы, как линии, блоки, изображения. В SVG есть все. Моя идея заключалась в том, чтобы включить SVG-изображение с помощью 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' 
})

Пока это прекрасно работает, svg-изображение отображается внутри приложения, субизображение тоже загружается. Теперь моя проблема: я хочу иметь возможность манипулировать svg-изображением во время выполнения, добавлять новые узлы и привязывать события sproutcore к различным узлам. Например: когда нажимается какое-то изображение в кодовом сниппете, я хочу, чтобы событие запускалось. Я решил, что могу связать события, используя

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

Но мне нужно иметь доступ к узлу svg-DOM, "someimage", чтобы привязать к нему событие. Я гуглил и пробовал jQuery, используя $('someimage').get(0) и многие другие методы, но, похоже, ничего не работает.

Может ли кто-нибудь дать мне подсказку о том, как получить доступ к элементу? Возможно, я делаю это неправильно, используя StaticContentView в первую очередь? Могу ли я создать SVG как собственный Sproutcore-Element или View, чтобы упростить задачу?


javascript svg jquery sproutcore sproutcore-views
person codepearlex    schedule 15.03.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ваше решение может работать, но оно неверно. Вы должны использовать события мыши * для реализации изменений. По умолчанию SproutCore уже прикрепит все события к вашему представлению и проверит, реализовали ли вы функции событий в своем представлении, когда событие произойдет.

Затем из обработчиков событий мыши* вы можете обратиться к текущему представлению через CoreQuery, используя this.$, и обратиться к элементу svg/элементу canvas с помощью метода, подобного jQuery.

Причина, по которой ваш метод неверен, заключается в том, что сейчас очень сложно передать любые изменения содержимого в остальную часть приложения без необходимости писать связующий код, который является одним из основных элементов, для замены которого был написан SproutCore.

Некоторое время назад я написал сообщение в блоге, в котором описывается, как создать собственный SC.View. Хотя это не совсем касается того, что вы хотите сделать, основы более или менее одинаковы.

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

Изменить: забыл ссылку на сообщение в блоге

person mauritslamers    schedule 16.03.2015
comment
Спасибо за ваш вклад! Я прочитал ваш пост и хотел бы взглянуть на будущий пост (об интерактивном пользовательском представлении), о котором вы говорите в конце. У вас тоже есть ссылка на это? - person codepearlex; 16.03.2015

arrow_upward
0
arrow_downward

На самом деле это было довольно легко, мне немного стыдно, что я открыл новую тему для этого, потому что обычно это означает, что я полностью потерян.

Решение: как упоминалось выше, легко связать события sproutcore с объектами во время выполнения (например, когда во время выполнения добавляются новые элементы DOM, чтобы они вызывали событие sproutcore), используя

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

Моя проблема заключалась в том, как получить доступ к DOM-элементу. Оказывается, обычная jQuery-функция $() работает и с представлениями. Мне просто нужно было вызвать его непосредственно в StaticContentView, плюс я забыл # (да). Итак, в моем примере выше можно получить элемент someimage-DOM с помощью следующего кода:

elem = svg.$('#someimage')[0];

Обратите внимание, что svg в приведенном выше коде является StaticContentView, а не элементом svg-HTML внутри StaticContentView. Я только что понял, что это может быть немного сложно отследить.

Таким образом, полный код, выполненный где-то внутри вашего приложения sproutcore «App» с mainPane, содержащей только StaticContentView «svg», выглядит следующим образом:

elem = App.mainPane.svg.$('#someimage')[0];
SC.Event.add(
  elem,
  "click", 
  function(){alert('clicked!');}
);

Надеюсь, кто-то столкнется с теми же проблемами и сэкономит время, читая это.

Еще кое-что: когда svg-view не является самым верхним видом на вашей панели, может быть очень удобно использовать метод SC.outlet. Посмотрите здесь.

person codepearlex    schedule 15.03.2015