全局引用b/t模板和视图

global references b/t templates and views

本文关键字：视图 引用 全局      更新时间：2023-09-26

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

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

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

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

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

相关文章：