I recently start learning developing metro apps using js and I faced problem updating _title and _errorMessage fields in callback functions _success and _error. When these functions are called this no more refer to MyClass object. So my question is how can update these two fields from callback functions.
(function () {
var MyClass = WinJS.Class.define(
function () {},
{
_title: "",
_errorMessage: "",
Authorize: function () {
WinJS.xhr({url:"http://example.com"})
.then(this._success,this._error);
},
_success: function(data){
this._title = data.responseData;
},
_error: function (data) {
this._errorMessage = data.responseData;
}
},
{
}
);
WinJS.Namespace.define("MynameSpace",
{
MyClass: MyClass
});
})();
One thing you can do is use the bind method of functions to set the context.
(function () {
var MyClass = WinJS.Class.define(
function () {},
{
_title: "",
_errorMessage: "",
Authorize: function () {
WinJS.xhr({url:"http://example.com"})
.then(this._success,this._error);
},
_success: (function(data){
this._title = data.responseData;
}).bind(this),
_error: (function (data) {
this._errorMessage = data.responseData;
}).bind(this)
},
{
}
);
WinJS.Namespace.define("MynameSpace",
{
MyClass: MyClass
});
})();
I don't understand how those functions could get called in the wrong context though.
Never mind, I see.
You can use a proxy variable as shown below
Authorize: function () {
var _this = this;
WinJS.xhr({url:"http://example.com"}).
then(function(data){
_this._success(data);
}, function(data){
_this._error(data);
});
}
Related
In my VueJS 2 component below, I can add the imgdata property to each question in the area.questions array. It works - I can see from the console.log that there are questions where imgdata has a value. But despite using $set it still isn't reactive, and the imgdata isn't there in the view! How can I make this reactive?
var componentOptions = {
props: ['area'],
data: function() {
return {
qIndex: 0,
};
},
mounted: function() {
var that = this;
that.init();
},
methods: {
init: function() {
var that = this;
if (that.area.questions.length > 0) {
that.area.questions.forEach(function(q) {
Util.HTTP('GET', '/api/v1/photos/' + q.id + '/qimage').then(function(response) {
var thisIndex = (that.area.questions.findIndex(entry => entry.id === q.id));
var thisQuestion = (that.area.questions.find(entry => entry.id === q.id));
thisQuestion.imgdata = response.data;
that.$set(that.area.questions, thisIndex, thisQuestion);
})
});
}
console.log("area.questions", that.area.questions);
},
Since area is a prop, you should not be attempting to make changes to it within this component.
The general idea is to emit an event for the parent component to listen to in order to update the data passed in.
For example
export default {
name: "ImageLoader",
props: {
area: Object
},
data: () => ({ qIndex: 0 }), // are you actually using this?
mounted () {
this.init()
},
methods: {
async init () {
const questions = await Promise.all(this.area.questions.map(async q => {
const res = await Util.HTTP("GET", `/api/v1/photos/${encodeURIComponent(q.id)}/qimage`)
return {
...q,
imgdata: res.data
}
}))
this.$emit("loaded", questions)
}
}
}
And in the parent
<image-loader :area="area" #loaded="updateAreaQuestions"/>
export default {
data: () => ({
area: {
questions: [/* questions go here */]
}
}),
methods: {
updateAreaQuestions(questions) {
this.area.questions = questions
}
}
}
Here that variable has a value of this but it's bound under the scope of function. So, you can create reactive property in data as below :
data: function() {
return {
qIndex: 0,
questions: []
};
}
Props can't be reactive so use :
that.$set(this.questions, thisIndex, thisQuestion);
And assign your API output to directly questions using this.questions.
Data part
data () {
return {
containsAd: true
}
},
Method that manipulates the data member containsAd
updated () {
let _this = this
window.googletag.pubads().addEventListener('slotRenderEnded', function (event) {
if (event.slot.getSlotElementId() === 'div-gpt-ad-nativead1') {
_this.containsAd = !event.isEmpty // this is false
console.log('Ad Exists? ', _this.containsAd)
}
})
},
Just to check if the value has changed or not.
check () {
let _this = this
setTimeout(function () {
console.log('Current Value', _this.containsAd)
}, 5000)
}
Resulting Output
I think doing the event listener in the mounted hook will sort your issue.
data() {
return {
containsAd: true
};
},
mounted() {
window.googletag.pubads().addEventListener('slotRenderEnded', event => {
if (event.slot.getSlotElementId() === 'div-gpt-ad-nativead1') {
this.containsAd = ! event.isEmpty // this is false
console.log('Ad Exists?', this.containsAd);
}
});
}
Also using es6 shorthand function will avoid you having to set _this.
I've played around with vue-i18n and Vue.compile() and found a very static solution to my problem. While searching for a solution I've tried to dynamically set the render functions during runtime. Unfortunately without any success.
Out of curiosity: Is it possible to exchange the render functions of Components during runtime?
I try to do something like this:
{
props: {
toCompile: {
type: String,
required: true
},
callbackFn: {
type: Function,
default: () => {}
}
},
created (){
let res = Vue.compile(this.toCompile);
this.render = res.render;
this.staticRenderFns = res.staticRenderFns;
}
}
The following approach is working for me:
{
...
methods: {
render: function () {
var createElement = this.$createElement;
return (this._self._c || createElement)("div", {
staticClass: "element"
});
}
},
beforeCreate: function() {
this.$vnode.componentOptions.Ctor.options.render = this.$vnode.componentOptions.Ctor.options.methods.render.bind(this);
}
}
If your want slots as well, use the following render method:
render: function () {
var that = this,
createElement = (this._self._c || this.$createElement),
children = Object.keys(that.$slots).map(function(slot) {
return createElement('template', { slot }, that.$slots[slot]);
});
return createElement('div', [
createElement('component-element, {
attrs: that.$attrs,
on: that.$listeners,
scopedSlots: that.$scopedSlots,
}, children)
]);
}
I'm trying to return some data using nextTick() in vuejs 2 as following
getProperty() {
this.$nextTick(function() {
return 'hello';
});
}
It doesn't work. Any clue?
this.$nextTick this function does not return anything; it just executes your callback after refreshing all new data.
so if you want to set some flag or data you can use modal/variable for that.
new Vue({
data: {
msg: 'hello'
},
methods: {
someTask: function () {
this.msg = 'hello next tick';
this.$nextTick(function() {
this.printVar();
});
},
printVar: function() {
// here this variable will be changed to latest value
// or call another function where this value is used
// this.anotherFunction();
console.log(this.msg);
}
},
ready: function () {
this.someTask();
}
});
or just let us know what you want to do with that so we can provide you better answer.
data: function () {
return {
questions: []
}
},
watch: {
questions : function(val, oldVal) {
foo()
}
},
methods: {
foo() {
console.log("foo called");
}
}
Produce error: ReferenceError: foo is not defined
Also I am looking at examples: http://vuejs-ru.github.io/vuejs.org/api/options.html#watch
What this string do?
handler: function (val, oldVal) { /* ... */ },
handler it's keyword? Or it can be function?
If you want to use watch to observe your property, you could call your method it with this.foo:
data: function () {
return {
questions: []
}
},
watch: {
questions: {
handler: function(val, oldVal) {
this.foo(); // call it in the context of your component object
},
deep: true
}
},
methods: {
foo() {
console.log("foo called");
}
}
To answer your question about handler: It is a keyword property that can take either a function expression (as in the example) or a reference to a function, such as:
function myHandler() { ... } // Defined somewhere outside of the vue component object
...
handler: myHandler,
...
Just out of curiosity: Do you need to watch a property in order to do something every time it changes or could computed properties solve your problem as well?
Just to add to the answer from #nils
handler: 'foo'
also works if the function foo is within methods.
Bit shorter than
handler() {
this.foo()
}