ES6 中的主干事件答案

【问题标题】：Backbone Events in ES6ES6 中的主干事件
【发布时间】：2017-11-09 22:34:09
【问题描述】：

我已经使用 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>

【问题讨论】：

标签： javascript backbone.js backbone-views

【解决方案1】：

正如您在构造函数中看到的那样，您定义了events在调用 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 与主干一起使用，除了劣势之外，您没有得到任何好处。您仍然可以在项目中使用所有其他 ES6 功能。

【讨论】：

谢谢 TJ，我会试一试的。感谢您的帮助。

【解决方案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'
	}
});

【讨论】：