无法使用 Backbone 的事件函数捕获 <a> href 上的点击事件答案

【问题标题】：Not able to catch a on-click event on an <a> href with Backbone's Events function无法使用 Backbone 的事件函数捕获 <a> href 上的点击事件
【发布时间】：2015-10-23 04:28:46
【问题描述】：

我无法在主干的事件对象中捕获 onclick 事件。我正在使用 rails 中的 link_to 来生成 <a> 链接。有人可以帮我吗？

HTML：

<div id="flash-messages">
<ul>
<li style="opacity: 1;">
<li style="opacity: 1;">
<li style="opacity: 1;">
<div class="alert alert-info">
<a id="consent-link" href="#">See here for more informationnn.</a>
<a class="controls close" aria-hidden="true" data-dismiss="alert" href="#">
<i class="icon-cancel fontLoaded"></i>
</a>

JS代码：

    module.exports = View.extend({
 
   template: template,
   events: {
    'click #btnSubmitModal': 'saveConsent',
    'click #consent-link' : 'openConsent'
   },

   openConsent: function(event){
    event.preventDefault();
    console.log ("asaasagsgsgs");
    view = new modalView({model: this.model})
   },

【问题讨论】：

您应该将整个文件转储到 gist 中或在此处添加。你遗漏了太多。如果我假设您做的其他所有事情都正确，那么这应该可以工作，但是不太可能出现问题。我不熟悉您在这里使用 module.exports（尽管我通常使用 require.js）并且对 link_to 的引用感到困惑，HTML 应该从 js 模板呈现，大多数人不会使用 rails helper在那里。
这是整个视图吗..？您在哪里将上述模板附加到此视图中..？ template..的值是多少？
模板是要在此视图中加载的车把的整个页面模板。
@brent 这里的 link_to 只是用一个 ID 创建链接，然后我在我的主干视图中添加事件处理程序。
@Ashish ：尝试将骨干视图 el 定义为 '#flash-messages'

标签： javascript backbone.js event-handling backbone-events chaplinjs

【解决方案1】：

来自文档：

模板 view.template([数据])

虽然视图模板不是由 Backbone，定义模板函数通常是一个很好的约定关于你的意见。这样，在渲染视图时，您有方便地访问实例数据。例如，使用下划线模板：

var LibraryView = Backbone.View.extend({
    template: _.template(...)
});

所以模板是一个自定义属性，我们可以用它来指向一个模板函数。定义这还不够，您必须通过将数据传递给模板函数来创建实际模板，并将生成的 HTML 附加到视图元素。

类似：

 module.exports = View.extend({
  initialize: function(){
    this.render();
  },
  template: Handlebars.compile(template), // where template is the handle bars template
  events: {
   'click #btnSubmitModal': 'saveConsent',
   'click #consent-link' : 'openConsent'
  },
  render: function(){
    this.$el.append(this.template(data)); //where data is the data you wish to pass to handle bars template function
  },
  openConsent: function(event){
    event.preventDefault();
    console.log ("asaasagsgsgs");
    view = new modalView({model: this.model})
  }
 });

事件处理程序的范围是（委托给）视图的元素。一旦您将HTML 附加到视图的元素（如上例的render 方法所示），事件将开始工作。

【讨论】：