RequireJS Uncaught TypeError：无法读取属性＆＃39; bind＆＃39;未定义的

Question

我正在尝试将常规JS转换为AMD以满足requieJS的需求。虽然转换后，我会遇到标题上所述的错误。

这是脚本发生的地方。

define(['cardExpansionTrianglify'], function(Trianglify) {
    var demoController = function() {
        /**
        * Enum of CSS selectors.
        */
        var SELECTORS = {
            pattern: '.pattern',
            card: '.card',
            cardImage: '.card__image',
            cardClose: '.card__btn-close',
        };

        /**
        * Enum of CSS classes.
        */
        var CLASSES = {
            patternHidden: 'pattern--hidden',
            polygon: 'polygon',
            polygonHidden: 'polygon--hidden'
        };

        /**
        * Map of svg paths and points.
        */
        var polygonMap = {
            paths: null,
            points: null
        };

        /**
        * Container of Card instances.
        */
        var layout = {};

        var demoCtrl = {
            init: function() {
                // For options see: https://github.com/qrohlf/Trianglify
                var pattern = Trianglify({
                  width: window.innerWidth,
                  height: window.innerHeight,
                  cell_size: 50,
                  variance: 1,
                  stroke_width: 0.5,
                  x_colors: ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#ffffff','#e0e0e0','#bababa','#878787','#4d4d4d','#000000'],
                  y_colors: ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#ffffff','#e0e0e0','#bababa','#878787','#4d4d4d','#000000']
                  // x_colors : ['rgb(103, 0, 31)','rgb(178, 24, 43)','rgb(214, 96, 77)','rgb(244, 165, 130)','rgb(253, 219, 199)','rgb(255, 255, 255)','rgb(224, 224, 224)','rgb(186, 186, 186)','rgb(135, 135, 135)','rgb(77, 77, 77)','rgb(26, 26, 26)'],
                  // y_colors: ['rgb(103, 0, 31)','rgb(178, 24, 43)','rgb(214, 96, 77)','rgb(244, 165, 130)','rgb(253, 219, 199)','rgb(255, 255, 255)','rgb(224, 224, 224)','rgb(186, 186, 186)','rgb(135, 135, 135)','rgb(77, 77, 77)','rgb(26, 26, 26)']
                }).svg(); // Render as SVG.

                this.mapPolygons(pattern);
                this.bindCards();
            },
            detectPointInCircle: function() {
                var xp = point.x;
                var yp = point.y;

                var xc = center.x;
                var yc = center.y;

                var d = radius * radius;

                var isInside = Math.pow(xp - xc, 2) + Math.pow(yp - yc, 2) <= d;

                return isInside;
            },
            onCardMove: function(track) {
                var radius = track.width / 2;

                var center = {
                    x: track.x,
                    y: track.y
                };

                polygonMap.points.forEach(function(point, i) {
                    if (demoCtrl.detectPointInCircle(point, radius, center)) {
                        $(polygonMap.paths[i]).attr('class', CLASSES.polygon);
                    } else {
                        $(polygonMap.paths[i]).attr('class', CLASSES.polygon + ' ' + CLASSES.polygonHidden);
                    }
                });
            },
            showHideOtherCards: function(id) {
                var TL = new TimelineLite;

                var selectedCard = layout[id].card;

                for (var i in layout) {
                    var card = layout[i].card;

                    // When called with `openCard`.
                    if (card.id !== id && !selectedCard.isOpen) {
                        TL.add(card.hideCard(), 0);
                    }

                    // When called with `closeCard`.
                    if (card.id !== id && selectedCard.isOpen) {
                    TL.add(card.showCard(), 0);
                    }
                }

                return TL;
            },
            playSequence: function(isOpenClick, id, e) {
                var card = layout[id].card;

                // Prevent when card already open and user click on image.
                if (card.isOpen && isOpenClick) return;

                // Create timeline for the whole sequence.
                var sequence = new TimelineLite({paused: true});

                var tweenOtherCards = demoCtrl.showHideOtherCards(id);

                if (!card.isOpen) {
                    // Open sequence.

                    sequence.add(tweenOtherCards);
                    sequence.add(card.openCard(this.onCardMove), 0);

                } else {
                    // Close sequence.

                    var closeCard = card.closeCard();
                    var position = closeCard.duration() * 0.8; // 80% of close card tween.

                    sequence.add(closeCard);
                    sequence.add(tweenOtherCards, position);
                }

                return sequence.play();
            },
            bindCards: function() {
                var elements = $(SELECTORS.card);

                $.each(elements, function(i, card) {
                    var instance = new Card(i, card);

                    layout[i] = {
                        card: instance
                    };

                    var cardImage = $(card).find(SELECTORS.cardImage);
                    var cardClose = $(card).find(SELECTORS.cardClose);

                    $(cardImage).on('click', demoCtrl.playSequence.bind(this, true, i));
                    $(cardClose).on('click', demoCtrl.playSequence.bind(this, false, i));
                });
            },
            mapPolygons: function(pattern) {
                // Append SVG to pattern container.
                $(SELECTORS.pattern).append(pattern);

                // Convert nodelist to array,
                // Used `.childNodes` because IE doesn't support `.children` on SVG.
                polygonMap.paths = [].slice.call(pattern.childNodes);

                polygonMap.points = [];

                polygonMap.paths.forEach(function(polygon) {

                    // Hide polygons by adding CSS classes to each svg path (used attrs because of IE).
                    $(polygon).attr('class', CLASSES.polygon + ' ' + CLASSES.polygonHidden);

                    var rect = polygon.getBoundingClientRect();

                    var point = {
                        x: rect.left + rect.width / 2,
                        y: rect.top + rect.height / 2
                    };

                    polygonMap.points.push(point);
                });

                // All polygons are hidden now, display the pattern container.
                $(SELECTORS.pattern).removeClass(CLASSES.patternHidden);
            }
        }

        demoCtrl.init();
    }

    return demoController;
});

在bindCards的点击事件中，demoCtrl.playSequence.bind会出错。