主干视图单击事件未启动

Backbone view click event not firing

本文关键字：启动 事件 单击 视图      更新时间：2023-09-26

以下是代码：

var view = Backbone.View.extend({
  el:'#comment',
  template:'',
  initialize:function(){
    this._getTemplate();
    this.render();
  },
  event:{
    'click #submit_btn' : 'submit'
  },
  _getTemplate:function(){
    $.ajax({
      ...
    });
  },
  render:function(){
    this.$el.html(this.template);
  },
  submit:function(event){
    alert('click');
  }
});

我使用ajax从服务器获取html模板，它运行良好。我在加载模板时没有问题。

这是我想要插入模板的div。

<div id="comment">...</div>

这是模板。我只是展示了简单的结构。

<div>...</div>
<button id="submit_btn">submit</button>
<div>...</div>

有人能帮我解决吗？

事件未触发，因为当尝试将事件绑定到DOM元素时（即在View构造时），DOM元素不存在。来自主干文档：

Backbone将在实例化时自动附加事件侦听器，就在调用initialize之前。

由于#submit_btnDOM元素匹配器不返回任何内容，因此不绑定任何事件。

在initialize()方法中获取模板的技术会有问题。在大多数基于OO的开发模式中，对象的构造函数不应该做很多工作，返回的实例应该在构造函数完成时完全初始化。主干视图在这方面没有什么不同。这里所写的构造函数试图做很多工作，但在这里获取模板作为对象创建的一部分没有任何好处。事实上也有一些危害：如果您最终创建了多个View实例，该怎么办？您最终会多次获取模板，即使内容完全相同。

强制任何类型的XHR同步也是有问题的。在同步请求期间，浏览器的主线程正忙于等待响应。在本例中，如果模板到达的时间超过几百毫秒，则您的应用程序对用户来说将显示为"冻结"。这提供了非常差的用户体验。异步代码可能感觉更复杂，但如果你正在构建一个基于JS的应用程序，即使复杂性很低，你也需要处理它。由于Javascript（主要）是单线程的，异步执行成为任何应用程序的重要工具。

一个更好的解决方案是将模板嵌入托管HTML页面内容中，或使用JS模块化技术（RequireJS、CommonJS等）将模板与需要它的模块有效地打包。

看起来事件字符串设置正确，呈现函数正在做正确的事情。我看到的一个问题是，根据Backbone View Extend文档，"initialized"函数应该是"initialize"。

参考：http://backbonejs.org/#View-扩展

相关文章：