I have a Vue Component like below:
Test.vue
private input: string = "";
private pageNumber: number = 0;
mounted() {
window.onpopstate = function() {
this.input = "test";
this.pageNumber = 1;
}
this.init({ page: this.page, input: this.input }); // reset search state when mounted
}
But if I put this.input = "test" inside the window.onpopstate function, it's log with Property 'input' does not exist on type 'WindowEventHandlers'.
So how can I assign value for this.input inside the window.onpopstate function?
Thank you!
You are using the function keyword to create a function. That means your this can be changed. Window events like window.onpopstate always set this to window. That means you are setting input and pageNumber on window. To fixy this you could use an arrow function.
window.onpopstate = () => {
this.input = "test";
this.pageNumber = 1;
}
Related
I'm facing an issue where the events happening in the owl carousel does not update data values outside of the function
This is my code:
endScenario: function() {
$(".owl-carousel").on('changed.owl.carousel', function(e) {
this.carouselIndex = e.item.index;
var numCarouselItems = $('.carousel__item').length - 1;
if (numCarouselItems === this.carouselIndex) {
this.isEndingActive = true
}
console.log(this.carouselIndex)
console.log(this.numCarouselItems)
console.log("this is inside the owl function : " + this.isEndingActive)
});
console.log("this is outside the owl function : " + this.isEndingActive)
}
data: {
isEndingActive: false,
}
The user is supposed to scroll through the carousel and when the user is at the final slide of the carousel, it will trigger the endScenario function which suppose to update the isEndingActive: false -> true but when the requirement is fulfil, it does not trigger the change from false to true. Is there a reason why and how do I rectify this?
it seems the usage of this
the outside this is not equal the inside this
you can resolve it by arrow function
$(".owl-carousel").on('changed.owl.carousel', e => {}
or you can save a variable
endScenario: function() {
const self = this;
$(".owl-carousel").on('changed.owl.carousel', function(e){
//use self replace this
});
}
I am passing data from parent to child. In the HTML, i can see the value of the Input() variable. However, on my TS file, when I try to do a conditional to check the value of Input() it is always an empty string. Here is my code for the child:
#Input() checkDbStatus = '';
ngOnInit() {
this.initForm();
this.dbStatusCheck();
}
// disables all controls in a form group
disableControl(group: FormGroup){
Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.get(key);
abstractControl.disable();
})
}
// disable form controls if dbStatus !== update
dbStatusCheck() {
if(this.checkDbStatus !== 'update') {
this.disableControl(this.demographicsSectionOne);
this.disableControl(this.demographicsSectionTwo);
this.disableControl(this.demographicsSectionThree);
this.disableControl(this.demographicsSectionFour);
this.disableControl(this.demographicsSectionFive);
}
}
I think you need to use the ngChange lifecycle.
https://angular.io/api/core/OnChanges
export class YourComponent implements OnChanges
ngOnChanges(changes: SimpleChanges) {
if (changes.checkDbStatus.currentValue !== changes.checkDbStatus.previousValue) {
this.doStatusCheck();
}
}
Try set and get input() function
https://angular.io/guide/component-interaction
_checkDbStatus: any;
#Input() set checkDbStatus(data: any) {
this._checkDbStatus = data;
this.dbStatusCheck(data)
}
get checkDbStatus(){return this._checkDbStatus }
Hi I have a problem and the error stated:- "Error: Target must be an event emitter."
If there is a change in fire variable and selectHandler is resumed, shouldn't the methods be triggered - toggleDropDown and focus?
Here's my code below:-
var fire = false;
var toggle1, toggle2 = true;
var select = new Select
({
store:storeA
}, 'node_Select');
select.startup();
fire = true;
var switchStore = new button
({
onClick: function()
{if (toggle1)
{
select.setStore(storeB);
toggle1 = false;
}
else
{
select.setStore(storeA);
toggle1 = true;
}
fire = true;
}
}, 'node_switchStore');
switchStore.startup();
var selectHandler = on.pausable(fire, 'change' function()
{
if(fire)
{
select.toggleDropDown();
select.focus();
fire=false;
}
})
var switchPause = new button
({
onClick: function()
{if (toggle2)
{
selectHandler.resume();
toggle2 = false;
}
else
{
selectHandler.pause();
toggle2 = true;
}
}
}, 'node_switchPause');
switchPause.startup();
What is event emitter? Only input change, button and DOM elements' events?
It seems that the fire variable is not event emitter, isn't it?
Please advise
Clement
It has to do with this line:
var selectHandler = on.pausable(fire, 'change' function()
You're trying to listen to one of javascripts primitive types, Boolean. In order for "dojo/on" to work, it has to listen to something that can fire off events. From what I'm seeing in your code sample, what you probably need is a function that handles the changing of the "fire" variable. How about something like this:
var openFire = function() {
select.toggleDropDown();
select.focus();
fire = false;
}
now instead of setting
fire=true;
you can just call
openFire();
The second approach, where I hardcode the input id's and connect them to onclick events works properly.
But, when I use the first approach, it doesn't work.
The code executes in this manner.
select1.on('change',function(evt) {
requiredFunction(select8.id);//select9 is not present (so I changed loop end value from inputs.length -1 to inputs.length -2 )
}
Am I missing some event handling principles in dojo?
Approach1:
function assignOnClickEvents(table) {
var inputs = document.getElementById(table).getElementsByClassName('classname');
for (var i = 0; i < (inputs.length - 1); i++) {
dijit.byId(inputs[i].id).on('change', function (evt) {
requiredFunction(inputs[i+1].id);
});
}
}
Approach2:
function assignOnClickEvents() {
var select1 = dijit.byId('select1');
var select2 = dijit.byId('select2');
var select3 = dijit.byId('select3');
var select4 = dijit.byId('select4');
var select5 = dijit.byId('select5');
var select6 = dijit.byId('select6');
var select7 = dijit.byId('select7');
var select8 = dijit.byId('select8');
var select9 = dijit.byId('select9');
select1.on('change', function (evt) {
requiredFunction('select2');
});
select2.on('change', function (evt) {
requiredFunction('select3');
});
select3.on('change', function (evt) {
requiredFunction('select4');
});
select4.on('change', function (evt) {
requiredFunction('select5');
});
select5.on('change', function (evt) {
requiredFunction('select6');
});
select6.on('change', function (evt) {
requiredFunction('select7');
});
select7.on('change', function (evt) {
requiredFunction('select8');
});
select8.on('change', function (evt) {
requiredFunction('select9');
});
}
You're mixing DOM node IDs and Dijit IDs. This could be a possible reason why your code isn't working.
To fix this, you could try the following approach:
var inputs = dijit.findWidgets(table); // Returns widgets, not DOM nodes
for(var i = 0;i < inputs.length - 1;i++) {
inputs[i].on('change', function(evt) {
// Remind: this returns the widget ID, not the DOM ID
requiredFunction(inputs[i+1].id);
});
}
In dojo there is a difference between widgets and DOM nodes. So using DOM functions (to retrieve a DOM node by ID or by classname) will not always work. They could work, but that's not always the fact.
You can also call your function requiredFunction() as follow :
<input data-dojo-attach-event="onChange:requiredFunction"></input>
This will reduce your time of looping and work similar as you want.
All the best.
I have a form with dynamic fields. In the afterrender event of the form I want to set the afterLabelTextTpl property. I can set this property but I can't see it change in my form. How can I achieve this?
Snippet:
listeners: {
beforerender: function () {
var fields = me.getForm().getFields();
Ext.each(fields.items, function (f, idx) {
f.afterLabelTextTpl = requiredTpl;
console.log(f.afterLabelTextTpl);
}); //eo Ext.each
}
}
Edit:
I was looking for the beforerender method
Try
f.labelEl.dom.innerHTML = "LABEL:<span style='color:red;font-weight:bold' data-qtip='Required'>*</span>";
You can not use this property after the component is already rendered.
The initRenderTpl (which makes use of the label templates) method is run only if the component is not yet rendered. Once its rendered it will not run again.
You will need to update the DOM directly.
I would recomend something like this in your form:
setRequired: function(field, index) {
field.afterLabelTextTpl = requiredTpl;
},
initComponent: function(arguments) {
var me = this;
this.on('beforeadd', function(me, field){
var fields;
if (field.isXType('fieldset')) {
fields = field.query('field');
Ext.each(fields, me.setRequired);
} else {
me.setRequired(field);
}
});
// rest of logic
me.callParent(arguments);
},