глобальные ссылки b/t шаблоны и представления

Имея дело с конкретными событиями, связанными с одним элементом dom, я хотел бы, чтобы было видно, что рассматриваемый элемент имеет события... не глядя на javascript (наряду с удалением двойных ссылок).

Например, возьмем этот простой шаблон:

<script type="text/template" id="template-page">
   <button id="do-something">click me</button>
</script>

Я мог бы использовать символ, который не использовался ни одним из рассматриваемых парсеров шаблонов (в моем случае я использую Play!, поэтому @ отсутствует), и сделать очевидным для разработчика, что кнопка привязана к событие (на самом деле я не уверен, что это работает, но суть вы поняли):

<script type="text/template" id="template-page">
   <button id="~do-something">click me</button>
</script>

Хотя использование ~ для представления элемента, привязанного к событию, будет работать, оно по-прежнему упоминается в приложении дважды — один раз в шаблоне выше и один раз в представлении:

class window.Page extends Backbone.Marionette.Layout

  template: '#template-page'

  events:
    'click button#~do-something': 'doSomething'

Есть лучший способ сделать это? Очень легко что-то пойти не так и случайно внести изменения в html, не понимая последствий (особенно если развиваются шаблоны именования и т. д.). Я могу придумать один способ, но у меня небольшие проблемы.

Возможно, было бы здорово указать переменную в представлении.

class window.Page extends Backbone.Marionette.Layout

  template: '#template-page'

  @doSomethingButton: 'button#do-something'

  events:
    'click #{doSomethingButton}: 'doSomething'

Однако я не могу передать эту информацию шаблону. Я видел что-то вроде этого: Как передать дополнительные переменные в символы подчеркивания шаблоны, но без игральных костей. В идеале это будет выглядеть так:

<script type="text/template" id="template-page">
   <button id="<%= Page.doSomethingButton %>">click me</button>
</script>

И тогда у меня будет видимость, которую я хочу! Вот что я пробовал: http://jsfiddle.net/franklovecchio/FkNwG/248/< /а>


javascript coffeescript backbone.js marionette underscore.js
person Community    schedule 21.08.2012    source источник
comment
Я не очень понимаю ваши потребности, но могу быть полезным пользовательские атрибуты данных ты?. Вы всегда можете использовать селекторы атрибутов jquery.   -  person fguillen    schedule 21.08.2012
comment
Я не хочу дублировать идентификатор dom между javascript и html, я хочу ссылаться на переменную подчеркивания в шаблоне, объявленном внутри представления. Это сделало бы его более прозрачным при просмотре только html в отношении того, какие классы/идентификаторы были привязаны. То, что вы упомянули, кажется неуместным :)   -  person    schedule 21.08.2012

Ответы (1)


arrow_upward
0
arrow_downward

Это (из вашей скрипки):

@doSomethingButton: 'button#do-something'
events:
  'click #{@doSomethingButton}': 'doSomething'

не работает по разным причинам:

  1. Интерполяция не работает внутри строк с одинарными кавычками.
  2. Вы не можете использовать произвольные выражения в ключах объектов, поэтому переход на "click #{...}" не поможет.
  3. Вы пытаетесь использовать button#do-something как спецификацию события и как атрибут id (id="<%= Page.doSomethingButton %>"), и это не имеет никакого смысла.

Вы можете исправить doSomethingButton как просто id и создать события класса Page при первом создании экземпляра:

@doSomethingButton: 'do-something'
initialize: ->
   if(!@constructor::events)
     key = "click button##{Page.doSomethingButton}"
     @constructor::events = { }
     @constructor::events[key] = 'doSomething'

Демонстрация: http://jsfiddle.net/ambiguous/Zzv34/

Это работает, но я не вижу, насколько это полезно, вы просто добавляете больше слоев и путаете вещи.

Я не понимаю, почему вы не используете атрибут данных:

<script type="text/template" id="template-page">
   <button id="do-something" data-is-bound="yes">click me</button>
</script>

тогда, если кто-то возится с шаблоном и видит date-is-bound="yes", он будет знать, что что-то еще заботится о id этой кнопки, поэтому им придется распространять любые изменения.

Вы можете передать явный набор событий в delegateEvents, чтобы вы могли просмотреть DOM вашего шаблона и интерпретировать id атрибутов для создания событий. Вы можете найти ids с префиксом do-, а затем сопоставить суффикс с именем обработчика:

events = { }
@$('[id^=do-]').each (i, el) ->
  events["click ##{el.id}"] = el.id.match(/(?:do-)(.*)/)[1]
@delegateEvents(events)

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

person mu is too short    schedule 21.08.2012