We Keep Coding

Vue.js 2 Cannot change value of data property inside method

I am trying to update taxParentId with the new id that i retrieve with my API call inside the getTaxParentId function, but I cannot get it to change. I can console.log the value fine inside the method, but it won't update it. It seems to be an issue of scope, but i have set $this = this to take care of this, however, it is not working.
the getPostType method works fine and properly updates the data value.
var newVue = new Vue({
el: '#app',
data() {
return{
posts: [],
taxonomy: '',
postType: '',
taxParentSlug: '',
taxParentId: 0
}
},
created (){
let $this = this;
this.getPostType(location.href);
this.getTaxParent(location.href)
this.getTaxParentId();
this.getPosts();
},
methods: {
getPostType: function(currentURL){
if (currentURL.includes('residential')) {
this.postType = 'residential';
}else if(currentURL.includes('commercial')){
this.postType = 'commercial';
}else if (currentURL.includes('auto')) {
this.postType = 'auto';
}
},
getTaxParent: function(currentURL){
if (currentURL.includes('solar')) {
this.taxParentSlug = 'solar';
}else if(currentURL.includes('decorative')){
this.taxParentSlug = 'decorative';
}else if (currentURL.includes('safety-security')) {
this.taxParentSlug = 'safety-security';
}
},
getTaxParentId: function(){
let $this = this;
axios
.get(apiRoot + $this.postType + '-categories')
.then(function (response) {
response.data.forEach(function(item){
if (item.slug == $this.taxParentSlug) {
$this.taxParentId = item.id;
}
});
}
)
},
getPosts: function(){
let $this = this;
console.log(apiRoot + $this.postType + '-categories?parent=' + $this.taxParentId)
axios
.get(apiRoot + $this.postType + '-categories?parent=' + $this.taxParentId)
.then(function (response) {
$this.posts = response.data;
console.log($this.posts)
}
)
},
},
});

Because of the async, add watchers to your data, and log there.
watch:{
posts(value){console.log(value))},
taxParentId(value){console.log(value))}
}
Ideally you would get a promise from each call, and then wait for them all. If one call is dependent on another, you need to put the second call in a then() block, or even better, await it (async/await)
Using this, all you need to do is return the promise, and it will be synchronized.
async created (){
let $this = this;
await this.getPostType(location.href);
await this.getTaxParent(location.href)
await this.getTaxParentId();
await this.getPosts();
},
So much cleaner then chaining then blocks. You can wrap the entire block in a SINGLE catch, and trap all exceptions AND all rejections. Of course, if the calls are not dependent, you may want to call them in parallel and not await.

Since you are already using promises, you should be able to build a promise chain to solve your async issue.
Take your current function:
```javascript
getTaxParentId: function(){
let $this = this;
axios
.get(apiRoot + $this.postType + '-categories')
.then(function (response) {
response.data.forEach(function(item){
if (item.slug == $this.taxParentSlug) {
$this.taxParentId = item.id;
}
});
}
)
},
and make it return a value, even if it is just the response
```javascript
getTaxParentId: function(){
let $this = this;
axios
.get(apiRoot + $this.postType + '-categories')
.then(function (response) {
response.data.forEach(function(item){
if (item.slug == $this.taxParentSlug) {
$this.taxParentId = item.id;
}
});
return response
}
)
},
Then in your created() function, you can chain the call..
created (){
let $this = this;
this.getPostType(location.href);
this.getTaxParent(location.href)
this.getTaxParentId()
.then(function (response) {
this.getPosts();
})
},
This should force this.getPosts() to wait for getTaxParentId to be complete.

Backbone issues multiple ajax requests unexpectedly

I put the fetch url with deferred method and I expect it will only invoke the remote ajax request one time.
However, it calls three times when I load the page.
How could I fix it? Thanks
js scripts
var Comments = Backbone.Collection.extend({
model: Comment,
url: fetch_comments_url,
initialize: function() {
this.fetch({
success: this.fetchSuccess,
error: this.fetchError
});
this.deferred = new $.Deferred();
},
deferred: Function.constructor.prototype,
fetchSuccess: function(collection, response) {
collection.deferred.resolve();
},
fetchError: function(collection, response) {
throw new Error("Products fetch did get collection from API");
},
var comments = new Comments();
...
comments.deferred.done(function() {
commentView.render();
emptyCommentView.render();
});
compelte js scripts
var Comments = Backbone.Collection.extend({
model: Comment,
url: fetch_comments_url,
initialize: function() {
this.fetch({
success: this.fetchSuccess,
error: this.fetchError
});
this.deferred = new $.Deferred();
},
deferred: Function.constructor.prototype,
fetchSuccess: function(collection, response) {
collection.deferred.resolve();
},
fetchError: function(collection, response) {
throw new Error("Products fetch did get collection from API");
},
wellFormedComments: function () {
var MESSAGE_LIMIT_LENGTH = 80
var models = comments.select(function (model) {
var msg = model.get("message")
if (msg!=null) {
msg = msg.replace(/^\s+|\s+$/g, '')
if (msg.length >= MESSAGE_LIMIT_LENGTH) {
model.set("preview_message", msg.substr(0, MESSAGE_LIMIT_LENGTH/2));
} else{
};
return true
}
else{
return false
};
});
return new Comments(models);
},
emptyComments: function () {
var models = comments.select(function (model) {
var msg = model.get("message")
return false===_(msg).notBlank();
});
return new Comments(models);
}
});
var comments = new Comments();
var CommentView = Backbone.View.extend({
el: $("#comments_section"),
render: function() {
var notNullComments = comments.wellFormedComments();
if (notNullComments.length > 0) {
$("#dadasay_comments_plugin").show();
}
var html = commentsTmpl(notNullComments.toJSON());
$(this.el).append(html);
},
});
var EmptyCommentView = Backbone.View.extend({
el: $("#empty_comments_list"),
render: function() {
var source = $('#empty_comments_list_tmpl').html();
var emptyComments = comments.emptyComments();
var html = emptyCommentsTmpl(emptyComments.toJSON());
$(this.el).html(html);
},
});
var commentView = new CommentView({
collection: comments
});
var emptyCommentView = new EmptyCommentView({
collection: comments
});
comments.deferred.done(function() {
commentView.render();
emptyCommentView.render();
});

The problem is that your comments collection triggers fetch when initialized. It's methods wellFormedComments and emptyComments creates new comments collections so they triggers fetch as well.
You can fix this by manually triggering fetch when required, something like:
var Comments = Backbone.Collection.extend({
model: Comment,
url: fetch_comments_url,
wellFormedComments: function() {
var MESSAGE_LIMIT_LENGTH = 80
var models = this.select(function(model) {
var msg = model.get("message")
if (msg != null) {
msg = msg.replace(/^\s+|\s+$/g, '')
if (msg.length >= MESSAGE_LIMIT_LENGTH) {
model.set("preview_message", msg.substr(0, MESSAGE_LIMIT_LENGTH / 2));
} else {};
return true
} else {
return false
};
});
return new Comments(models);
},
emptyComments: function() {
var models = this.select(function(model) {
var msg = model.get("message")
return false === _(msg).notBlank();
});
return new Comments(models);
}
});
var CommentView = Backbone.View.extend({
el: $("#comments_section"),
render: function() {
var notNullComments = comments.wellFormedComments();
if (notNullComments.length > 0) {
$("#dadasay_comments_plugin").show();
}
var html = commentsTmpl(notNullComments.toJSON());
$(this.el).append(html);
},
});
var EmptyCommentView = Backbone.View.extend({
el: $("#empty_comments_list"),
render: function() {
var source = $('#empty_comments_list_tmpl').html();
var emptyComments = comments.emptyComments();
var html = emptyCommentsTmpl(emptyComments.toJSON());
$(this.el).html(html);
},
});
var comments = new Comments();
var commentView = new CommentView({
collection: comments
});
var emptyCommentView = new EmptyCommentView({
collection: comments
});
comments.fetch({ // <--------- Do this manually once
success: function() {
commentView.render();
emptyCommentView.render();
},
error: function() {}
});
I think you can better structure your code as shown below, hope the comments explain the changes
var Comments = Backbone.Collection.extend({
model: Comment,
url: fetch_comments_url,
wellFormedComments: function() {
var MESSAGE_LIMIT_LENGTH = 80
var models = this.select(function(model) {
var msg = model.get("message")
if (msg != null) {
msg = msg.replace(/^\s+|\s+$/g, '')
if (msg.length >= MESSAGE_LIMIT_LENGTH) {
model.set("preview_message", msg.substr(0, MESSAGE_LIMIT_LENGTH / 2));
}
return true
}
return false
});
return new Comments(models);
},
emptyComments: function() {
var models = this.select(function(model) {
var msg = model.get("message")
return false === _(msg).notBlank();
});
return new Comments(models);
}
});
var CommentView = Backbone.View.extend({
el: $("#comments_section"),
template: commentsTmpl, // template reference, better create it here
initialize: function() {
this.render(); // self rendering
},
render: function() {
if (this.collection.length) { // use this.collection to refer to view's collection rather than external variables
$("#dadasay_comments_plugin").show(); //This shouldn't be a global selection
}
var html = this.template(this.collection.toJSON());
this.$el.append(html);
//---^ use cached jQuery object rather than creating new one
},
});
var EmptyCommentView = Backbone.View.extend({
el: $("#empty_comments_list"),
template: emptyCommentsTmpl,
initialize: function() {
this.render();
},
render: function() {
var source = $('#empty_comments_list_tmpl').html(); // unused?
var html = this.template(this.collection.toJSON());
this.$el.html(html);
},
});
var comments = new Comments();
comments.fetch({ // <--------- Do this manually once
success: function(collection, response) {
//----------------^ comments collection, all comments
var commentView = new CommentView({
collection: collection.wellFormedComments() // pass the resuting collection
});
var emptyCommentView = new EmptyCommentView({
collection: collection.emptyComments() // pass the resuting collection
});
},
error: function() {}
});

get method on collection in backbone

I'm using the get backbone method on a collection but in the same file (router),in a function works while in other function doesn't work.Below the function where doesn't works
var Models = {};
var AppRouter = Backbone.Router.extend({
routes: {
"": "home",
"user/:id":"userDetails",
"settings":"settings",//mettere id dell utente loggato
"friends":"friends",
"mailbox":"mailbox",
"landscape":"landscape",
"gestione_richieste_amic":"gestione_richieste_amic"
},
friends: function(){
console.log("friend_router");
var self=this;
Models.utenti = new Usercollection();
Models.utenti.fetch({
success: function(object) {
console.log(object);
var view=new FriendsView({model:object});
self.changePage(view);
},
error: function(amici, error) {
}
});
console.log(Models.utenti);
var cur_user=Parse.User.current().id;
console.log(Models.utenti.get(cur_user));<--undefined, don't works here
console.log(cur_user);
} ,

The reason for this the Asynchronous nature of Ajax (fetch method).
The line where you log to the console will be executed before the collection is fetched. So you see an error.
1st Option - resolving the error is moving the log to inside of the success handler
friends: function () {
console.log("friend_router");
var self = this,
Models.utenti = new Usercollection();
Models.utenti.fetch({
success: function (object) {
console.log(object);
var view = new FriendsView({
model: object
});
self.changePage(view);
console.log(Models.utenti);
var cur_user = Parse.User.current().id;
console.log(Models.utenti.get(cur_user));
console.log(cur_user);
},
error: function (amici, error) {
}
});
},
2nd Option - you might take is to bind a sync event on the collection..
initialize: function () {
this.Models.utenti = new Usercollection();
this.listenTo(this.Models.utenti, 'sync', this.logCollection);
_.bindAll(this, 'logCollection');
},
logCollection: function () {
console.log(this.Models.utenti);
var cur_user = Parse.User.current().id;
console.log(this.Models.utenti.get(cur_user));
console.log(cur_user);
},
friends: function () {
console.log("friend_router");
var self = this;
this.Models.utenti.fetch({
success: function (object) {
console.log(object);
var view = new FriendsView({
model: object
});
self.changePage(view);
},
error: function (amici, error) {
}
});
},

Get object value

I have an object
var actions = {
'photos': function()
{
var self = this; // self = actions
$.get('./data.php?get=photos', function(data)
{
self.result = data;
});
},
'videos': function()
{
var self = this;
$.get('./data.php?get=videos', function(data)
{
self.result = data;
});
}
};
Each function creates one more item in actions called result
Then, instead of switch I use this (works good):
if (actions[action])
{
actions[action](); // call a function
console.log(actions);
console.log(actions.result);
}
action is a variable with value photos or videos.
console.log(actions) gives this:
Object
message: function ()
messages: function ()
profile: function ()
profile-edit: function ()
result: "<div>...</div>"
__proto__: Object
So I think there is resultitem in actions with the value "<div>...</div>".
But, console.log(actions.result) returns undefined.
Why?
I know all this code may be rewrited, but I would like to understand the reason of undefined.

Because we are dealing with asynchronous requests, we use "callbacks".
A callback is called when an asynchronous request is ready. Your request will get a response, and you send that response with the callback. The callback handles the response.
var actions = {
'photos': function(callback)
{
$.get('./data.php?get=photos', callback);
},
'videos': function(callback)
{
$.get('./data.php?get=videos', callback);
}
};
var action = 'photos';
actions[action](function(data) {
console.log(data);
});
Since you ensist on keeping the values, I would use this structure:
var actions = {
'photos': function()
{
$.get('./data.php?get=photos', function() {
this.__callback('photos', data);
});
},
'videos': function()
{
$.get('./data.php?get=videos', function() {
this.__callback('videos', data);
});
},
'__callback': function(action, data) {
this.results[action].push(data);
},
'results': {
'photos': [],
'videos': []
}
};
var action = 'photos';
actions[action]();
// use a timeout because we are dealing with async requests
setTimeout(function() {
console.log(actions.results); // shows all results
console.log(actions.results.photos); // shows all photos results
console.log(actions.results.videos); // shows all videos results
}, 3000);
gaaah what a horrible piece of code...

Set a knockout.js observable without subscriptions firing

How can I set an observable property without any subscriptions firing for it?
I have a scenario were the page loads, an ajax call is made to get some data, the data is looped over and the currently selected item is then set to an observable. I want to be able to set this observable without any subscriptions for it firing because the first time this observable is set is considered its initial sate and the subscriptions should not execute on initial state.
function PlanViewModel() {
var self = this;
self.plans = ko.observableArray();
self.selectedItem = ko.observable();
self.getAllPlans = function () {
$.ajax({
url: "/Backoffice/Home/GetAllPlans",
type: "POST",
data: {},
context: this,
success: function (result) {
var planList = this.plans;
// clear the plan list
planList.removeAll();
$.each(result.plans, function () {
var planDetail = new PlanDetail(this, self);
if (this.IsSelected) {
self.selectedItem(planDetail); // how do I set this without the subscriptions firing?
}
planList.push(planDetail);
});
},
error: function (result) {
alert("An error occured getting plans.");
}
});
}
self.selectedItem.subscribe(function (newItem) {
newItem.repositoryUpdateSelectedPlan();
} .bind(self));
}

You could restructure your code like this:
function PlanViewModel() {
var self = this;
self.plans = ko.observableArray();
self.getAllPlans = function () {
$.ajax({
// …
success: function (result) {
// …
$.each(result.plans, function () {
var planDetail = new PlanDetail(this, self);
if (this.IsSelected) {
self.selectedItem = ko.observable(planDetail);
}
planList.push(planDetail);
});
if (self.selectedItem === undefined) {
self.selectedItem = ko.observable();
}
self.selectedItem.subscribe(function (newItem) {
newItem.repositoryUpdateSelectedPlan();
}.bind(self));
},
// …
});
}
}
That is, only start Knockout after your desired initial state is achieved.

Thanks, I went down that route and its working with some modifications. The selectedItem observable must be defined on the model from the get go because its used in bindings all over the place but I did move the subscription portion like you've suggested and that's working out great.
function PlanViewModel() {
var self = this;
var selectedItemSubscription = null;
self.plans = ko.observableArray();
self.selectedItem = ko.observable();
self.getAllPlans = function () {
$.ajax({
url: "/Backoffice/Home/GetAllPlans",
type: "POST",
data: {},
context: this,
success: function (result) {
var planList = this.plans;
// clear the plan list
planList.removeAll();
$.each(result.plans, function () {
var planDetail = new PlanDetail(this, self);
if (this.IsSelected) {
if (selectedItemSubscription != null)
selectedItemSubscription.dispose();
self.selectedItem(planDetail);
}
planList.push(planDetail);
});
selectedItemSubscription = self.selectedItem.subscribe(function (newItem) {
newItem.repositoryUpdateSelectedPlan();
}.bind(self));
},
error: function (result) {
alert("An error occured getting plans.");
}
});
}
}