Develop Reference

how to call this with libraries that changing the default this?

so I started to using interactjs
and I have this simple code:
class example {
registerTouchEvents() {
var self = this;
interact('.touchy').draggable({
onstart: self.onStart,
});
}
onStart(event) {
this.someAction();//<-- not working as this is interact object
}
someAction() {
console.log('touch has been started') //<-- I need to call this function
}
}
is there someway of calling the current object without using global variable?

Move the handler where you declare "self":
class example {
registerTouchEvents() {
var self = this
, onStart = function onStart(event) {
self .someAction();
}
;
interact('.touchy').draggable({
onstart: onStart,
});
}
someAction() {
console.log('touch has been started') //<-- I need to call this function
}
}

javascript custom module system

i am trying to make a custom module based application myself.
1st the idea:
i want to have couple of modules which all will represent a file )
1 module: Object, with filename. Object.js
2nd module: Utils, with filename Utils.js
now as you can see in my code i am using get script to load all those files and prepare a global app object which i can use all accross my application.
However i want to combine all my js at the end of the development and minify it, so basically i dont know how to check ( and register ) those modules with requiring the file itself. Here are my app.js and my Object.js
app.js:
var shop = (function () {
'use strict';
var modules = [];
var getModulesDir = function () {
return document.location.origin + "/js/App/modules/"
}
var registerDefaultModules = function () {
modules.push({
name: "Object",
alias: "Object"
}, {
name: "Utils",
alias: "Utils"
});
};
var loadModules = function () {
jQuery.each(modules, function (key, module) {
if (module.name == "") {
console.error("loading script without name");
return true;
}
if (module.alias == "") {
module.alias = module.name;
}
if (typeof shop[module.alias] !== "undefined") {
return true;
}
window.moduleAlias = module.alias;
var path = "";
if (typeof module.path != "undefined") {
path = module.path;
}
if (path == "") {
path = getModulesDir() + module.name.split('.').join('/') + ".js";
}
$.getScript(path)
.done(function (script, textStatus) {
})
.fail(function (jqxhr, settings, exception) {
console.error('failed loading a script')
});
});
}
var init = function () {
registerDefaultModules();
loadModules();
}
return {
init: init
};
})();
jQuery(document).ready(function () {
shop.init();
});
Object.js
(function($, app) {
$(window).load(function(event) {
'use strict';
app.Object = {
getSize: function(object) {
var size = 0,
property;
for (property in object) {
if (object.hasOwnProperty(property)) {
size++;
}
}
return size;
}
}
return app;
});
})(jQuery, shop);
i could be totally wrong, and if so would be nice if someone show me the right way of doing it.

Export React mixin in a separated file

I am trying to separate the SetIntervalMixin into a different file that the component class file. Maybe I am not fully understand how module.export works but... If I do like this:
module.exports = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
inside a SetIntervalMixin.js, then it works fine using from the component:
var SetIntervalMixin = require('../util/mixins/SetIntervalMixin')
But if I write it like this:
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
module.export = SetIntervalMixin;
It doesn't work (undefined when trying to call setInterval()). I think something is missing after:
SetIntervalMixin = ...
Like when you define a component, you use:
var yourComponent = React.createClass(...
Is there is something similar like a React.createMixin(.. ? Or how would be the best way to do this.
Thanks.

Your code is right, you just have a typo in the second version (should be module.exports instead of module.export):
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
module.exports = SetIntervalMixin;

Accessing javascript object property within nested function

Good day,
I have created an object that will manage data access. My app will be using a couple different datastores, so I have created a simple factory to switch between providers:
var dataProvider = {
company: {
getAllCompanies: function (callback) {
var impl = factory.createProvider(implInstance.current)
impl.company.getAllCompanies(callback);
}
}
projects: {
getAllProjects: function (callback) {
var impl = factory.createProvider(implInstance.current)
impl.projects.getAllProjects(callback);
}
}
}
That is all well and good, but I'd rather have my impl variable at the dataProvider level. I'm unsure how I would properly access it though, as 'this' doesn't provide me the right scope when I'm nested so deeply. I'd like something like the following:
var dataProvider = {
impl: function () { return factory.createProvider(implInstance.current) },
company: {
getAllCompanies: function (callback) {
//THIS WON'T WORK
this.impl.company.getAllCompanies(callback);
}
}
Thanks!

You'd want to use the module design pattern for this:
var dataProvider = (function () {
var getImpl = function () {
return factory.createProvider(implInstance.current);
};
return {
company: {
getAllCompanies: function (callback) {
getImpl().company.getAllCompanies(callback);
}
},
projects: {
getAllProjects: function (callback) {
getImpl().projects.getAllProjects(callback);
}
}
}
})();

creating custom events for plugin

I'm wanting to know how to create my own custom events for my plugin and how to fire the event. My addItem function works but I don't know how to make my own custom event to work does anyone know?
$('#TreeView').Web().DropDownList().onload(function () {
alert('loaded function event');
}).click(function () {
$(this).addItem('Hello World');
});
$.fn.Web = function () {
var $this = this;
return {
TreeView: function () {
return $this.each(function () {
alert('TreeViewControl');
})
},
DropDownList: function () {
var methods = {
addItem: function () {
alert('AddItem');
}, removeItem: function () {
alert('removeItem');
}
}
return $this.each(function () {
//methods.addItem.apply(this, arguments);
for (var method in methods) {
methods[method].apply(this, arguments);
}
return this;
})
}
}
};