저는 오랫동안 ES5 형식의 백본으로 작업 해 왔으며 ES6에서 새로운 프로젝트를 만들려고합니다. 빌드 프로세스 등을 테스트하기 위해이 기본적인 뷰를 만들었습니다.ES6의 백본 이벤트
엘에서 예상대로 렌더링하는 뷰를 얻을 수 있습니다. 그러나 나는 이벤트를 전혀 발사하지 못하는 것 같습니다. 나는 간단한 것을 놓치고 있다고 확신하지만 그것이 무엇인지를 찾을 수없는 것 같습니다.
당신이 당신의 생성자에서 볼 수 있듯이
import $ from "jquery";
import _ from 'underscore';
import Backbone from 'backbone';
class basicView extends Backbone.View {
\t constructor(options) {
\t \t super();
\t \t this.options = options;
\t \t this.events = {
\t \t \t 'click #bc': 'clickHandler'
\t \t };
\t \t this.render();
\t }
\t render() {
\t \t $(this.options.el).html('<a id="bc" href="#">button</a>');
\t \t return this;
\t }
\t clickHandler() {
\t \t alert("button clicked");
\t \t return false;
\t }
};
$(() => {
\t new basicView({
\t \t el: '#container'
\t });
});<!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>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에서 이벤트 해시를 통과하여 작동 할 수 있습니다. 간단하고 우아한 해결책 : class 대신 Backbone.View.extend()을 사용하십시오. 백본과 함께 class을 사용하면 단점 이외의 이점을 얻을 수 없습니다. 프로젝트에서 다른 모든 ES6 기능을 계속 사용할 수 있습니다.
TJ 권장대로이 솔루션은 잘 작동합니다. 다시 한번 감사드립니다. 우리는 현재 ES6에서 ES6에서 백본을 작동해야하는지 여부를 Vue.js에 완전히 다시 적용하여 ES5에서 사용해야하는지 여부를 결정하려고합니다. 따라서 이것이 여행의 첫 걸음입니다.
감사 TJ