CODEWITHSUNDEEP
javascriptrequire
Jacob Bloyd
Jacob Bloyd

Reputation: 61

Callbacks with Require JS

So i'm trying to make two functions that allow a user to move an item from their cart to the "saved cart" and vise versa. These functions depend on the "cart group item" module which also contains the events for the button clicks. My question is, i'm unsure how to correctly call these functions to allow the click event to take place in my current js file. Hopefully someone can help!

Event's in module:

cartGroupItem.prototype.createMoveEvent = function (elem) {
  if (undefined !== elem && null !== elem) {
    var button = elem.querySelector('.cartGroupItem__move');
    if (button !== null) {
      button.addEventListener('click', function (e) {
        ajax('GET',
               '/resources/ajax/cart.aspx?sub=3&Saved=0&Cart_Group_ID='+this.cartGroupId,
          true, {}, function () {
            this.moveToCartCallback();
          }.bind(this), function () {
            this.showErrorDiv();
          }.bind(this));
      }.bind(this));
    }
  }
};

cartGroupItem.prototype.createSaveEvent = function (elem) {
  if (undefined !== elem && null !== elem) {
    var button = elem.querySelector('.cartGroupItem__save');
    if (button !== null) {
      button.addEventListener('click', function (e) {
        ajax('GET',
               '/resources/ajax/cart.aspx?sub=3&Saved=1&Cart_Group_ID='+this.cartGroupId,
          true, {}, this.saveForLaterCallback.bind(this), this.showErrorDiv.bind(this));
      }.bind(this));
    }
  }
};

Move functions:

function moveToSaved(cartGroupId) {
    for (var i = 0, l = activeCartList.length; i < l; i++) {
        if (activeCartList[i].cartGroupId === cartGroupId) {
            activeCartList.remove();
            savedCartList.push(activeCartList[i]);
        }

    }
}

function moveToActive(cartGroupId) {
    for (var i = 0, l = savedCartList.length; i < l; i++) {
        if (savedCartList[i].cartGroupId === cartGroupId) {
            savedCartList.remove();
            activeCartList.push(savedCartList[i]);
        }
    }
}

Upvotes: 3

Views: 108

Answers (1)

floribon
floribon

Reputation: 19183

Your Event module probably define the function cartGroupItem right?

What you need to do is pass this function from its file to your current file, and then "instanciate" a carteGroupItem:

// In your current JS file
var myCartGroupItem = new cartGroupItem();
myCartGroupItem.createMoveEvent();
myCartGroupItem.createSaveEvent();

We also would need to see this function "constructor" (where it is defined) as it probably takes a few callbacks as parameters. Otherwise you can add them manually:

myCartGroupItem.moveToCartCallback = function() {
  // do what you want when the item is moved to cart
};
// Same for the other callbacks
myCartGroupItem.saveForLaterCallback = function() { ... };
myCartGroupItem.showErrorDiv = function() { ... };

Finally, the way to pass things with RequireJS is that for instance, your Event module returns cartGroupItem so in your file module:

define(['Event'], function(cartGroupItem) {
  // Your code where you can use cartGroupItem
});

Upvotes: 2

Related Questions