How to use Angular 4 variable inside Jquery Function - javascript

This question has already got some response here. But this doesn't seem to be working for me.
I am trying to create a tree structure using jQuery. The problem is I can not use a declared angular 4 variable inside a jQuery function. Here's the code.
employees = ["Mr. John", "Mr. Steve"];
ngOnInit() {
(function($) => {
function OrgChart($container, opts){
console.log(this.employees);
}
});
}
I see an error in console stating, "Function declarations are not allowed inside blocks in strict mode when targeting ES3 or ES5"

1st (the employees of undefined problem)
To bind the "this" of the component, use the arrow notation for functions :
($) => { console.log(this.employees)}
instead of function($) { ... }
2nd (the "function declarations are not allowed inside blocks")
You could declare your other inner function in another place in your Angular component, and then refer to it :
ngOnInit() {
// this declaration is nonsense to me, this will declare a function that is never called and exists only here, but anyway...
($) => {
// you can call OrgChart here :
this.OrgChart()
}
}
OrgChart($container, opts) {
console.log(this.employees);
}

You need store angular component reference in another variable before start jquery block.
export class PlanGruposComponent implements OnInit {
group = 'Meu grupo';
OnInit() {
//reference of currect component object
let temporaryThis = this;
$(document).ready(function () {
console.log("Print : " + temporaryThis.group);
});
}
}

Related

Vue custom directive how to receive a function as params and the function will not auto exec

How do I receive a function with params in directive like vue v-on?
<div v-example="test(id)"></div>
and this script
methods: {
test(id) {
console.log(id);
}
}
the test function will auto exec, but v-on will not?
You may also do the following:
<div v-example="test(id)"></div>
script:
directives: {
'example': {
bind(el, binding, vnode) {
el.addEventListener(binding.arg, (e) => {
if(binding.value instanceof Function) {
binding.value();
}
})
}
}
},
methods: {
test(id) {
let local_id = id;
return () => {
console.log(local_id);
}
}
}
Don't know how to mimic the built-in v-on style, there's too many problems includes auto run.
Below is the most concise and simple solution I can think of.
html
<div v-example="function(){ test(id) }"></div>
or more concise
<div v-example="()=>test(id)"></div>
js
directives:{
example: {
bind(el, binding){
binding.value()
}
}
},
methods: {
test(id) {
console.log(id);
}
}
It depends on what you are trying to achieve.
If your goal is to pass the directive a function pointer (so you can execute the function later on inside your directive), you should listen to what gonnavis said and use an arrow function.
What you tried to do will not work because when Vue will mount the component, it will bind the directive to the element (<div>) and create a binding object. This object contains a "value" function which is assigned to return the argument you passed to the directive. So, while the directive is being bound, it calculates the value you passed to it, and if it is a function invocation, it invokes the function immediately.
You can imagine that when the element with your directive is bound, the following line will run:
const binding = {
value: YOUR_ARG
}
And, in your case, it will be translated to:
const binding = {
value: test(id)
}
Which will calculate test(id) immediately.
It is all about functional programming.
You can simply pass a function and the parameters separately to your directive like demonstrated on this fiddle. Since passing the function like test('something') will cause it to be evaluated immediately.
Just replace the inserted hook with the one you need: https://v2.vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments
<div v-demo="{myFunction: test, param: 'something'}"></div>

Use variables in gridOptions in ag-grid for Angular 2

I'm working on a table in my Angular 2 application. I'm using ag-grid. this is my gridOptions
this.gridOptions = <GridOptions>{
onGridReady: (() => {
this.gridOptions.api.sizeColumnsToFit();
this.gridOptions.onFilterModified = function () {
console.log("Value Changed")
}
})
}
This code works fine. If i change the value in the search field, i will get the text "Value Changed" in the console. I want to use a variable in the OnFilterModified function that is defined outside that function , but it doesn't work.
console.log(this.) after the dot i only get onGridReady function. That's it. How can i access other functions/variables in the OnFilterModified function?
This isn't really an ag-grid or angular 2 quesion, but rather a javascript scoping one.
In the function (and I assume you're just using javascript here, not typescript) "this" isnt the out scope, but rather the functions, which isn't useful.
The easiest fix for you is to do the following:
var that = this;
this.gridOptions = <GridOptions>{
onGridReady: (() => {
that.gridOptions.api.sizeColumnsToFit();
that.gridOptions.onFilterModified = function () {
console.log(that.gridOptions)
console.log("Value Changed")
}
})
};
I'd check out this (there are many articles on this subject) for more information about JavaScript scope: http://ryanmorr.com/understanding-scope-and-context-in-javascript/ for a better understanding of the issue.

Knockout.js unable to process binding: undefined is not a function?

I'm trying to implement a custom binding for an accordion-like document layout on a webpage, but I'm encountering an issue I can't easily solve.
Immediately on page load, I am presented with the error:
Uncaught TypeError: Unable to process binding "accordion: function (){return currentAccordionSection }"
Message: undefined is not a function
I have tried declaring my observable as both a function and normally in the data-bind syntax without success. I have initialized my observable with a default value (null) and it has not fixed this issue. Below is my entire ViewModel:
var libraryViewModel = function () {
var self = this;
ko.bindingHandlers.accordion = {
update: function (element, valueAccessor) {
console.log(ko.unwrap(valueAccessor()));
var value = ko.unwrap(valueAccessor());
var section = $(element.text());
//ko.bindingHandlers.css.update(element, function () {
// if (value === section) {
// return 'library-section-active';
// }
//});
//ko.bindingHandlers.css.update($(element).children('i:last-child').get(0), function () {
// if (value === section) {
// return 'fa fa-chevron-up';
// } else {
// return 'fa fa-chevron-down';
// }
//});
}
}
self.currentAccordionSection = ko.observable(null);
self.updateAccordionSection = function (section) {
self.currentAccordionSection(section);
}
}
Some of the code above is commented out as it is not relevant to the problem at hand and I have disabled it to implement a reduced test case to narrow down the problem. Here is my binding declaration:
<h2 class="library-header" data-bind="accordion: currentAccordionSection, click: updateAccordionSection.bind('Text')">
What exactly am I doing wrong?
The problem is this line:
var section = $(element.text());
as per knockout's documentation
element — The DOM element involved in this binding
text is a jQuery function not a DOM function so I think you are looking for something like:
$(element).text() or $($(element).text()) instead? I'd assume the former since it makes more sense.
As for the nested binding handler I'm not sure why that is in the viewmodel since it's exposed on the knockout global object you're not protecting yourself from anything just making your code more unreadable. They are designed to be resuable so you can use them with different viewModels

Calling a custom function in JQuery

I want to call a JavaScript function that I made after a JQuery event has been called. I defined a function called scrambleDot earlier like this var scrambleDot = new function()
{ //my code }. Here's the code that I tried to use:
$('#reveal').click(function() {
$('.cover').css({'visibility':'hidden'});
$('#under').css({'visibility':'visible'});
})
$('#conceal').click(function() {
$('scrambleDot');
})
})
You have to call it just like:
scrambleDot();
To define a function, you don't need the new operator, so you should have:
var scrambleDot = function() { //my code }
If it still throws an error, it means it was defined in other scope. To make it globally accesible, do this when defining it:
window.scrambleDot = function() { //my code }
Cheers
We have to use new keyword, only when the function is used as a constructor for new Objects. So, the definition should not use new.
var scrambleDot = function() { //my code }
If the function need not be created dynamically, I would recommend
function scrambleDot() {
...
}
To invoke the function, simply do
scrambleDot();
For that call the function instead of selecting an element as:
$('#reveal').click(function() {
$('.cover').css({'visibility':'hidden'});
$('#under').css({'visibility':'visible'});
})
$('#conceal').click(function() {
scrambleDot();
});
And also, you write functions as:
function scrambleDot () {
// your code
}
It is a better practice than the variable one.

Can you use a function argument directly in a namespace?

I have the following function:
prevPage: function (store){
myapp.stores.store.proxy.extraParams = { sendpage: myapp.stores.store.data.items[0].data.currentPage -1 };
},
Which basically modifies the extraParams namespace according to whatever 'store' is entered as an argument in the function, but it doesn't work. I think I am using 'store' wrong in the function definition.
To rephrase, if I define the function as:
prevPage: function (){
myapp.stores.examplestore.proxy.extraParams = { sendpage: myapp.stores.store.data.items[0].data.currentPage -1 };
},
It works correctly for the examplestore namespace.
How do I do it so I can have that namespace as a variabl argument in the function?
You have to write it this way myapp.stores[store].proxy.extraParams where store is a string.

Categories

Resources