Демонстрационное приложение: https://glitch.com/~rivets-so
Я связываю объект с данными и функциями (контроллер).Этот объект управляется в классе JS.С помощью связывателя on- [event] вызывается функция, но она не может получить доступ к самому объекту (в моем примере, переменной ImportantData).Возможно ли это сделать?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.9.6/rivets.bundled.min.js"></script>
<script type="module" src="/main.js" defer></script>
</head>
<body>
<h1>
Simple app
</h1>
<div id="content">
<span rv-on-click="data.controller.click">{ data.data.Nom }</span>
</div>
</body>
</html>
main.js:
import { Controller } from '/controller.js';
var controller = new Controller('Important data');
rivets.bind(document.querySelector('#content'), { data: controller.getData() });
controller.js:
export class Controller {
constructor(importantData) {
this.importantData = importantData;
}
getData() {
return {
data: {
Nom: 'Francis'
},
controller: {
click: function(event, model) {
console.log("Click !");
// this represent the element clicked, not the class itself
console.log(this.importantData);
}
}
};
}
}