Question

以下是代码：

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>

有人可以帮我解决吗？

Answer 1

看起来事件字符串设置正确，渲染功能正在做正确的事情。我看到的一个问题是＆＃39;已初始化＆＃39;功能应该是初始化＆＃39;根据Backbone View Extend文档。

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

Answer 2

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

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

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

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

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

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

Backbone视图单击事件未触发

2 个答案: