Template Context Function Error

by marionettejs

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.1.0/backbone.marionette.min.js"></script>
<div id="root-element"></div>

JavaScript

const MyView = Mn.View.extend({
  el: '#root-element',
  // Change the below to contextKeyFunction() to see the error
  template: _.template('<h1>Hello, <%- contextKeyVar %></h1>'),

  templateContext() {
    return {
      contextKeyVar: this.getOption('contextKey'),  // OK - "this" refers to view
      contextKeyFunction: function() {
        return this.getOption('contextKey');  // ERROR - "this" refers to data
      }
    };
  }
});

const myView = new MyView({contextKey: 'world'});
myView.render();