I'm trying to use a function within another, but even though I declared it beforehand, polymer says it isn't. I don't get it. any clue?
Polymer({
is: 'x-foo',
//some other code here, including the properties....
computeRange: function (offset, limit, nodeRangeStart, nodeRangeEnd) {
nodeRangeStart.innerText = offset;
nodeRangeEnd.innerText = offset + limit;
},
prevPage: function () {
this.offset = this.offset - this.limit;
computeRange(this.offset, this.limit, this.$.usersListRangeStart, this.$.usersListRangeEnd);
this.$.nextPage.removeAttribute('disabled');
if (this.offset <= 0) {
this.$.prevPage.setAttribute('disabled', true);
this.$.prevPage.style.color = '#DDDDDD';
};
}
});
and the console:
Uncaught ReferenceError: computeRange is not defined
You're attempting to call computeRange() as if it were a global function, but it's actually part of your constructor object. You'll need to use this:
this.computeRange(...)
Related
When running code in a code block it results in 'undefined' then using the 'this' to reference a local variable in a block of code.
The strange thing is when removing the 'this' keyword in the same block, it prints fine.
let productId = 12;
if (true) {
let productId = 10
console.log(this.productId) // results in 'undefined'
console.log(this) //results in '{}'
console.log(productId) // results in '10'
}
Was under the impression that the 'this.productId' would refer directly to the productId in the true code block.
'this' to reference a local variable in a block of code.
That never happens. It just looks that way if "local" and "global" happen to be the same.
Here you can see how it behaves when you use var in a global scope.
var foo = "global";
function myFunction () {
var foo = "local";
console.log(this.foo);
}
myFunction();
And here in strict mode:
"use strict";
var foo = "global";
function myFunction () {
var foo = "local";
console.log(this.foo);
}
myFunction();
The side-effect of using var in the global scope creating a window property of the same name is weird and confusing.
When let was created it wasn't designed to use the same weird and confusing behaviour.
this being window by default is also weird and confusing, and isn't the case in Strict mode.
Using Polymer 1 and Web component tester... testing in shady dom on chrome.
In WCT, trying to stub spToast.display() with stub('sp-toast', { display: ()=> {} }); but I get error with Attempted to wrap undefined property display as function.... what I am doing wrong?
The reason why I am trying to stub it is because I get spToast.display is not a function when the test runs the code base.
original code:
showAgeWarning: function() {
var spApp = Polymer.dom(document).querySelector('sp-app');
var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
var msg = "foo"
spToast.display('information', msg);
},
test code:
<test-fixture id="sp-veteran">
<template>
<h2>edit veteran</h2>
<sp-app>
<sp-toast></sp-toast>
<sp-veteran>
</sp-veteran>
</sp-app>
</template>
</test-fixture>
setup(function() {
replace('sp-app').with('fake-sp-app');
replace('sp-ajax').with('fake-sp-ajax');
stub('sp-value-dropdown', { setInvalidState: (state)=> {} });
myEl = fixture('sp-veteran');
});
test('it should validate the veteran', function() {
var spApp = Polymer.dom(myEl.root).querySelector('sp-app');
var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
sinon.stub(spToast, 'display');
When you get Attempted to wrap undefined property display as function it means that it can't replace a method that doesn't exist (yet).
If you actually get a value for var spToast = Polymer.dom(spApp.root).querySelector('sp-toast') in your test, and nothing about your test is going to give display a value, you could just set it, a la spToast.display = function() {}; then you should be able to set a spy on it or what have you as needed.
Put it all together and you could have
test('it should validate the veteran', function() {
var spApp = Polymer.dom(myEl.root).querySelector('sp-app');
var spToast = Polymer.dom(spApp.root).querySelector('sp-toast');
spToast.display = function() {};
sinon.spy(spToast, 'display');
// Trigger the side effect that would lead to `display` being called
assert.equal(
spToast.display.calledOnces,
true
);
});
I have a property defined but when I try to access it from inside a setInterval anonymous function, it is not being recognized.
this.game.seconds = 6;
useTimer() {
let timer = setInterval(
function () {
this.game.seconds--;//here the keyword this is not being recognized
}, 1000
);
}
The problem occurs because you are not not using an Arrow Function.
Arrow functions take this from their outer execution context.
The ref mentions:
arrow functions which do provide their own this binding (it remains
the this value of the enclosing lexical context).
Read more in No Binding of this.
So just to this instead:
let timer = setInterval(
() => {
this.game.seconds--; // 'this' takes its value from the outer context
}, 1000
);
Well I could fulfill my goal with arrow functions as commented by Dummy and answered by gsamaras:
this.game.seconds = 6;
useTimer() {
let timer = setInterval(
() => {
this.game.seconds--;
}, 1000
);
}
more info here.
I'm having real trouble trying to access the symbol dynamically, I have 9 buttons that all call this method, and they pass in their location (tl, t, tr, etc.) I've tried this method before on another program and it works without a problem, but in this program it fails.
I am attempting to access a symbol call s_tl (example location), but all I'm getting is undefined (see results).
function turn(btn : String):Function {
return function(e:MouseEvent) {
var players_turn : int;
var chosen : String = "s_" + btn;
trace(this);
trace(this[chosen]);
trace(chosen);
trace(this[chosen]);
// if crosses turn 0 else 1
if (s_c.currentFrame == 1) {
players_turn = 0;
} else {
players_turn = 1;
}
// check who's turn it is if it's been pressed before
if (players_turn == 0 && this[chosen].visible == false) {
this[chosen].gotoAndStop(1);
this[chosen].visible = true;
} else {
this[chosen].gotoAndStop(2);
this[chosen].visible = true;
}
};
}
Results:
[object global]
undefined
s_br
undefined
TypeError: Error #1010: A term is undefined and has no properties.
at MethodInfo-6()
Your problem is the bad code style. You define unnamed unbind function inside function turn() and that's where the root of your problem is. Unbind function exist, as your trace shows, in global addressing context and, unlike function turn(), is not bind to any specific display object. Your buttons probably exist on the same addressing context with turn(). Argument btn is available inside unnamed function because ECMA standard instructs so (if function A creates function B then local variables, including arguments, of A are available as local variables in B), but it is a very very very bad practice that makes code messy and induce headaches.
Please explain what you tried to achieve with that code so we could untangle it and rewrite in not-so-twisted way.
Okey, I basically figured you're doing Tic Tac Toe. Now, guideline. A cell must contain 3 frames: 1st frame for the button graphics, 2nd and 3rd for X and O. Name them your way: s_1, s_2, etc.
for (var i:int = 1; i < 10; i++)
{
var aCell:MovieClip = getChildByName("s_" + i) as MovieClip;
aCell.addEventListener(MouseEvent.CLICK, onTic);
}
function onTic(e:MouseEvent):void
{
var playersTurn:int = s_c.currentFrame;
var aCell:MovieClip = e.currentTarget as MovieClip;
trace(aCell.name);
// Now, the magic.
aCell.gotoAndStop(playersTurn + 1);
aCell.removeEventListener(MouseEvent.CLICK, onTic);
}
I am having trouble passing a kata. I believe I am on the right track, but do not fully understand how to retrieve the desired results.
The Instructions
Write a method that takes in a function and the arguments to the function and returns another function which when invoked, returns the result of the original function invoked with the supplied arguments.
Example Given
Given a function add
function add (a, b) {
return a + b;
}
One could make it lazy as:
var lazy_value = make_lazy(add, 2, 3);
The expression does not get evaluated at the moment, but only when you invoke lazy_value as:
lazy_value() => 5
Here is my half a day endeavor conclusion
var make_lazy = function () {
var innerFunction = null;
var array = [];
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == 'function') {
innerFunction = arguments[i];
} else {
array.push(arguments[i]);
}
}
innerFunction.apply(innerFunction, array);
innerFunction();
};
I'm using arguments and apply() and think I am close? However I am getting TypeError: lazy_sum is not a function at Object.exports.runInThisContext within test results. Any help, especially understanding what is going on, is appreciated. Thanks
...
return function() {
return innerFunction.apply(this, array);
};
};
Thanks again all. Problem solved.