Rivets.js - on- [event]活頁夾和回調函數

Question

演示應用程序： https ： //glitch.com/~rivets-so

我用數據和函數綁定一個對象（控制器）。 該對象在JS類中管理。 使用on- [event] binder，會調用一個函數，但它無法訪問對象本身（在我的示例中，為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);
        }
      }
    };
  }
}

Answer 1

解決方案是在我的類Controller中使用箭頭函數：

export class Controller {
  constructor(importantData) {
    this.importantData = importantData;
  }

  getData() {
    return {
      data: {
        Nom: 'Francis'
      },
      controller: {
        click: (event, model) => {
          console.log("Click !");
          // this represent the element clicked, not the class itself
          console.log(this.importantData);
        }
      }
    };
  }
}

Rivets.js - on- [event]活頁夾和回調函數

問題描述

1 個解決方案

解決方案1
0 2019-04-09 08:11:24

Rivets.js - on- [event]活頁夾和回調函數

問題描述

1 個解決方案

解決方案1 0 2019-04-09 08:11:24

解決方案1
0 2019-04-09 08:11:24