Backbone ES6 中的事件

Question

我使用 ES5 形式的 Backbone 已经有一段时间了，我希望尝试在 ES6 中构建一个新项目。我构建了这个非常基本的视图只是为了测试我的构建过程等。

我可以让视图在 el 中按预期呈现。但是，我似乎根本无法触发该事件。我确信我遗漏了一些简单的东西，但我似乎找不到它是什么。

import $ from "jquery";
import _ from 'underscore';
import Backbone from 'backbone';

class basicView extends Backbone.View {
 constructor(options) {
  super();
  this.options = options;
  this.events = {
   'click #bc': 'clickHandler'
  };
  this.render();
 }

 render() {
  $(this.options.el).html('<a id="bc" href="#">button</a>');
  return this;
 }

 clickHandler() {
  alert("button clicked");
  return false;
 }
};

$(() => {
 new basicView({
  el: '#container'
 });
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>es6</title>

</head>

<body>
  <div id="container">

  </div>
  <script src="ui/js/production/home.js"></script>
</body>

</html>

Answer 1

正如您在构造函数中看到的那样，您定义了 events after 调用 Backbone.View 的代码来执行解析事件哈希和绑定事件等操作.

constructor(options) {
    super();
    // ^---- don't have an event hash when this code executes.
    this.events = { // this is now useless
        'click #bc': 'clickHandler'
    };

super(options) 并在 options 中传递事件散列可能有效。简单而优雅的解决方案：使用 Backbone.View.extend() 而不是 class。通过将 class 与 backbone 结合使用，您除了不利之外什么也得不到。您仍然可以在项目中使用所有其他 ES6 功能。

Answer 2

按照 TJ 的建议，此解决方案效果很好。再次感谢。我们正在尝试决定是否应该让 Backbone 在 ES6 上工作，因为我们目前在 ES5 上使用它，还是完全重新加工到 Vue.js，所以这是我们旅程的良好开端。

import $ from "jquery";
import _ from 'underscore';
import Backbone from 'backbone';

class basicView extends Backbone.View {
 constructor(options) {
  super(options);
  this.options = options;
  this.render();
 }

 render() {
  $(this.options.el).append('<a id="bc" href="#">button</a>');
  return this;
 }

 clickHandler() {
  console.log("click");
  return false;
 }
};

new basicView({
 el: '#container',
 events: {
  'click a#bc': 'clickHandler'
 }
});

Backbone ES6 中的事件

Backbone Events in ES6

javascript

backbone.js

backbone-views