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

正如您在构造函数中看到的那样，在调用Backbone.View的代码之后定义events ，这些代码可以解析事件哈希和绑定事件。

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功能。

Answer 2

正如TJ推荐的那样，这种解决方案效果很好。再次感谢。我们正在尝试决定是否应该在ES6上使用Backbone，因为我们目前在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'
	}
});

ES6中的骨干事件

2 个答案: