全局参考 b/t 模板和视图答案

【问题标题】：global references b/t templates and views全局参考 b/t 模板和视图
【发布时间】：2012-08-16 19:25:02
【问题描述】：

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

虽然使用~ 表示绑定到事件的元素会起作用，但仍然在应用程序中引用了两次 - 一次在上面的模板中，一次在视图中： p>

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'

不过，我似乎无法将此信息传递给模板。我看到了类似的东西：How to pass additional variables in to underscores templates，但没有骰子。理想情况下，它应该是这样的：

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

然后我就会有我想要的知名度！这是我一直在尝试的：http://jsfiddle.net/franklovecchio/FkNwG/248/

【问题讨论】：

我不太了解您的需求，但custom data attributes 对您有帮助吗？你总是可以使用jquery attribute selectors。
我不想在 javascript 和 html 之间复制 dom ID，我想在视图内声明的模板中引用一个下划线变量。当仅查看绑定了哪些类/ID 的 html 时，这将使其更加透明。你提到的似乎不相关:)

标签： javascript backbone.js coffeescript underscore.js marionette

【解决方案1】：

这个（来自你的小提琴）：

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

由于各种原因无法正常工作：

插值在单引号字符串中不起作用。
您不能在对象键中使用任意表达式，因此切换到 "click #{...}" 将无济于事。
您试图将 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 属性来构建您的事件。您可以查找带有 do- 前缀的 ids，然后将后缀映射到处理程序名称：

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

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

【讨论】：