Set ReactiveDict() variable inside of custom event function - javascript

I try to set a ReactiveDict-variable on a custom event inside of on(), but I get this error: Uncaught TypeError: Cannot read property 'templateDictionary' of null.
The second question is, if it would make sense to define the ReactiveDict() in onRendered?
Template.something.onCreated(function() {
this.templateDictionary = new ReactiveDict();
});
Template.something.onRendered(function() {
anything.on({
'element:mouseover': function(elementView, event){
Template.instance().templateDictionary.set( 'showExtraFields', true );
}
});
});
Template.something.helpers({
anything: function() {
var result = Template.instance().templateDictionary.get( 'showExtraFields' );
console.log(result);
}
});

Put instance reference inside onRendered function. Not inside another function. Scope issue.

I have no idea what anything.on is, but try this:
Template.something.onRendered(function() {
anything.on({
'element:mouseover': (elementView, event) => {
this.templateDictionary.set( 'showExtraFields', true );
}
});
});
Use the ES6, Luke!

Related

Object is not defined in the scope

I'm trying to send information to another page, but i'm getting this error.
angular.min.js:107 ReferenceError: layoutTeste is not defined
This is my code.
vm.editar = function () {
$state.go("importacaoPreFaturaValidar", {
layoutTeste: vm.layouteste
});
}
the vm.layouteste has values, but the layoutTeste says is not defined.
What did i miss, in the scope i put.
vm.layoutTeste = [];
You need to pass the parameter within quotes
$state.go("importacaoPreFaturaValidar", {
'layoutTeste': vm.layouteste
});
I had similar error. Try:
$state.go("importacaoPreFaturaValidar", {
layoutTeste: vm.layouteste
}).bind(this)
Use arrow function instead. This way you will retain the original scope, which is now considered as undefined.
vm.editar = () => {
$state.go("importacaoPreFaturaValidar", {
layoutTeste: vm.layouteste
});
}

Access JS this from Scala.js

I'm trying to convert this code from js library docs into scala.s:
$('#myTable').on( 'click', 'tbody td', function () {
editor.inline( this, {
submitOnBlur: true
} );
} );
Code I tried:
$("#table").on("click", ".editable", (thiz: js.Dynamic) => {
editor.inline(thiz, JC(
submitOnBlur = true
))
})
But it gives me error:
Cannot read property 'contents' of undefined at f.inline
The callback function you wrote, i.e.,
(thiz: js.Dynamic) => {
editor.inline(thiz, JC(
submitOnBlur = true
))
}
is a function of 1 parameter (that happens to be called thiz), instead of a function that receives this as a parameter. In other words, it is equivalent to the following in JS:
function(thiz) {
editor.inline(thiz, JC(...))
}
To get access to the this, you need to force your callback function to be a js.ThisFunction, as follows:
((thiz: js.Dynamic) => {
editor.inline(thiz, JC(
submitOnBlur = true
))
}): js.ThisFunction
This will take the first argument of the Scala lambda (in this case, the only one) and attach it to the this value of JavaScript, which is what you want.

using a DOM event callback inside an object

In p5.js, How do you make a DOM element callback a function if both the DOM element and the function are inside the same object ? for example :
function Snape()
{
this.myInput = createInput("");
this.myInput.changed(this.erase);
this.erase = function()
{
}
}
when I type something in this.myInput, I would like it to call the function this.erase, but I get the error 11913: Uncaught TypeError: Cannot read property 'bind' of undefined
is it possible ?
——————————————————————————————————————————
EDIT : The main issue is solved if I declare this.erase before I call it :
function Snape()
{
this.myInput = createInput("");
this.erase = function()
{
}
this.myInput.changed(this.erase);
}
but that’s a really messy way to do it.
Moreover, I wasn’t able to implement what was suggested in the answer :
In p5.js, the way we invoke a callback is like this :
this.myInput.changed(this.erase);
if I do this
this.myInput.changed(this.erase());
I get this error : Uncaught TypeError: undefined is not a function
So, when I try to call this.erase using this (as was suggested) :
this.myInput.changed(function(){ myself.erase(); });
I get the same error Uncaught TypeError: undefined is not a function
I tried all the different possibilities :
this.myInput.changed(function(){ myself.erase() });
this.myInput.changed(function(){ myself.erase; });
this.myInput.changed(function(){ myself.erase });
neither of those are working.
I can’t use the => function because I need to call this.erase a lot of times in different instance of the object, and from multiple DOM elements.
You have to save this into a variable so you can then reference it:
function Snape() {
var myself = this;
this.myInput = createInput("");
this.myInput.changed(function(){ myself.erase(); });
this.erase = function()
{
console.log("erased");
}
}
Another (less elegant) solution would be this:
var input;
function setup () {
createCanvas(500, 300);
input = new Snape () ;
}
function Snape () {
this.myInput = createInput("");
this.myInput.changed(tunnel);
this.erase = function()
{
console.log("erased");
}
}
function tunnel () {
input.erase();
}

Reactive variable is undefined when it is defined

I would like to get some help debugging a situation where a Reactive Variable is undefined, when it has been defined already.
This code is attaching a Reactive Variable to the template instance, and using the variable in template.autorun().
Template.home.onCreated(function () {
this.limit = new ReactiveVar(15);
this.autorun(function () {
this.subscribe('recent-topics', this.limit.get());
});
});
When I load the template for the first time, I expect the template to subscribe to recent-topics with an argument 15. However, the code throws an error:
Uncaught TypeError: Cannot read property 'get' of undefined
Any ideas why?
Just an answer for the sake of spreading the joys of ES6:
Template.home.onCreated(function () {
this.limit = new ReactiveVar(15);
this.autorun(() => {
this.subscribe('recent-topics', this.limit.get());
});
});
Make sure you add the grigio:babel package, and your Javascript file ends in .es6.js, .es6, or .jsx.
Explanation
In ES6 (aka ECMAScript 6), there's a new "fat arrow" syntax which is very similar to CoffeeScript's implementation. In ES6, when you do something like this:
someFunc = function () {
anotherThing((var1, var2) => {
this.thing = true;
});
};
It's the same as doing this:
someFunc = function () {
var self = this;
anotherThing(function (var1, var2) {
self.thing = true;
});
};
This is a scoping issue.
Inside of your Tracker.autorun, this no longer refers to the template, but the autorun's callback function. Inside of the autorun, try calling Template.instance().limit.get().
Better than using Template.instance().limit.get() (ryan's answer)
You should do something like this:
Template.home.onCreated(function () {
var self = this;
self.limit = new ReactiveVar(15);
self.autorun(function () {
self.subscribe('recent-topics', self.limit.get());
});
});

Using an anonymous function as part of a javascript object

I'm going to show you two snippets.
This works fine:
this.searchBox = new Foo.UI.SearchBox(this.input, {
autoCompleteSearchComplete: processSearchResults
});
This doesn't work at all:
this.searchBox = new Foo.UI.SearchBox(this.input, {
autoCompleteSearchComplete: function() {
processSearchResults
}
});
I need to place that processSearchResults call inside an if statement, to check if my search text input ($('.search')) has any text written inside it.
My first idea was to use this function type notation, but it's not working. It's as if the call to processSearchResults is never made at all.
Any suggestions?
That's because you do not actually call that function. This would be correct:
this.searchBox = new Foo.UI.SearchBox(this.input, {
autoCompleteSearchComplete: function() {
if (...) {
processSearchResults();
}
}
});

Categories