0

在处理绑定到单个 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/

4

1 回答 1

0

这（来自你的小提琴）：

@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属性以构建事件。您可以查找id带有do-前缀的 s，然后将后缀映射到处理程序名称：

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

但是现在你在两个地方都有方法名称，所以你仍然卡住了，但至少你会得到一个错误而不是无声的混乱。

于 2012-08-21T18:34:35.377 回答