We Keep Coding

How to make module pattern each function a promise?

I use Angular 1.5 and I made a factory function which is return a literal object like this:
return {
item: null,
get: function() {
return item;
},
create: function() {
if (this.get()){
this.remove();
}
this.item = {};
},
remove: function() {
var item = this.get();
if (item) {
this.item = null;
}
},
add: function() {
if (!this.get()) {
this.create();
}
this.item.newprop = 'value';
}
}
please do not ask me to change to function declaration. I want a object with his own actions(functions) and properties that is working on.
This pattern (like get inside create so on..) I didn't copied from anywhere. so I'm wonder if has a name? It is best way to deal with function-black boxes?
What is the best way to put Promise inside? so every function should return a promise
every then function I need to use bind???
todo like this:
create: function () {
this.get()
.then(remove)
.then(function () {
this.item = {}; // BUT this === undefined!!
});
}

You have to use bind in every then callback function:
var myModule = {
item: null,
get: function() {
return Promise.resolve(this.item);
},
create: function() {
return this.remove().then(function() {
this.item = {};
}.bind(this));
},
remove: function() {
return this.get().then(function(item) {
if (item) {
this.item = null;
}
}.bind(this));
},
add: function() {
return this.get().then(function(item) {
return item || this.create();
}.bind(this)).then(function() {
this.item.newprop = 'value';
}.bind(this));
}
}
// Let see it working:
myModule.create().then(function() {
return myModule.get();
}).then(function(item) {
console.log("After create: ", item);
return myModule.remove();
}).then(function() {
return myModule.get();
}).then(function(item) {
console.log("After remove: ", item);
return myModule.add();
}).then(function() {
return myModule.get();
}).then(function(item) {
console.log("After add: ", item);
});

Javascript wrong binding: function disappear but variables ok

The problem is that when I am binding this to function in .then() of Promise all variables is binded but 1 which is function, not.
define([
'Service/service',
'core/widget'], function (service, widget) {
return widget.extend({
init: function (options) {
this.options = options;
console.log('this.options: ', this.options); //{actionToDo:function(),variables...}
service.getFile('app/Core/Widgets/Button/Views/button.html')
.then(
function(){
console.log('this.options: ', this.options); //{actionToDo:undefined,...}
}.bind(this)
)
}
});});
I am creating the object by:
new Button(
{
elementToAppend: this.className + ' .actions > .actionButtons',
class: action.class,
icon: action.icon,
text: action.text,
unique: action.unique,
actionToDo: function(){//some code}
}
);
And the widget:
define(['underscore'], function (_) {
function Widget() {
}
return {
extend: function (methods) {
var widget = new Widget();
widget.prototype = {
trigger: function (event) {
switch (event) {
case 'click':
{
this.onClick.call(this);
break;
}
}
}
};
var Widget_Extended = _.extend(widget.prototype, methods);
return function (options) {
Widget_Extended.init(options);
return Widget_Extended;
};
}
};});
Could you tell me why inside function in .then() 1 parametr of options is undefined?

The solve of the problem (I guess) is:
define(['underscore'], function (_) {
function Widget() {
}
return {
extend: function (methods) {
return function (options) {
var widget = new function () {
};
widget.prototype = {
trigger: function (event) {
switch (event) {
case 'click':
{
this.onClick.call(this);
break;
}
}
}
};
var Widget_Extended = _.extend(widget.prototype, methods);
Widget_Extended.init(options);
return Widget_Extended;
};
}
};});

JS scope: call parent function using namespace

How do I call a parent namespace function from within a function?
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
setTimeout ( function () {
myNamespace.funcOne(); //how do I call funcOne?
}, 2000);
}
}

The usual way would be to use the this keyword inside the literal
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
var self = this;
setTimeout ( function () {
self.funcOne();
}, 2000);
}
}
But what you're doing should work just fine as well -> FIDDLE

javascript calling parent method from child

I have the following object:
var party =
{
food:
{
serve: function () {
// I want to call turnOff method from here
}
cleanUp: function () {
}
}
music:
{
turnOff: function () {
}
}
}
So as the comment points out, I want to call the turnOff method from the music object, how can I do this? this refers to the food object but I need to access the music object...

var party =
{
food:
{
serve: function () {
party.music.turnOff();
},
cleanUp: function () {
}
},
music:
{
turnOff: function () {
}
}
}

Use a constructor instead of a literal with a variable referencing the parent object
var party = new (function()
{
var self = this;
this.food =
{
serve: function () {
self.music.turnoff();
},
cleanUp: function () {
}
}
this.music =
{
turnOff: function () {
}
}
})();

Call it as party.music.turnOff().
FYI, your above code block isn't valid. You're missing some commas - after the serve and food closing braces.

Variable Scope: cross-class function call

I have a vehicle and a product object and I need vehicle to call a function within product.... I can't seem to figure it out, what should I do here?
var vehicle = function () {
return {
init: function () {
var that = this;
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
that.remove(jQuery(e.currentTarget).parents('.vehicle-year-profile'));
});
jQuery('.vehicle-year-profile .options .edit').bind('click', function (e) {
e.preventDefault();
that.edit(jQuery(e.currentTarget).parents('.vehicle-year-profile').attr('id'));
});
jQuery('#association-detail .save').bind('click', function (e) {
e.preventDefault();
that.save();
});
},
edit: function (id) {},
save: function () {},
remove: function (el) {},
reset: function () {}
}
}();
var product = function () {
return {
refreshHistory: function () {}
};
}();

Have you tried
product.refreshHistory();
?? The variable "product" is global (or at least relatively global), so code inside the "vehicle" object can refer to it directly.