angularFire not binding to objects - angularfire

I'm trying to write to an object in firebase, here is how i did it:
var myDataRef = new Firebase('https://ootest1.firebaseio.com/users/' + '-J6kDooooooz_eV3Cq' /*JobsManager.getCurrentUser().username*/);
angularFire(myDataRef, $scope, 'newUser');
if (!$scope.newUser.jobs)
$scope.newUser.jobs = [];
The problem is that $scope.newUser is undefined.
Why is that?

The angularFire binding returns a promise, and the $scope.newUser model won't be defined until that promise is fulfilled:
var promise = angularFire(myDataRef, $scope, 'newUser');
// $scope.newUser is undefined
promise.then(function(){
// $scope.newUser is defined
}

Related

How to pass a reference to a Boolean in es6 or better solution for Vue

I am picking up a Vue project and would like to pass a reference to a "spinner" for fetch requests. If an error, I'd like to pass a reference in the checkIfError method below rather than just the Boolean value. Something like this:
checkIfError(response, loadingStatus){
if (!response.ok) {
loadingStatus = false; // I'd like to set this.loadingQuotes to false and not set true to false
const message = `An error has occured: ${response.status}`;
msg = "this is jacked up";
alert(message);
throw new Error(message);
}
},
getQuotes(){
this.loadingQuotes = true;
const response = await fetch("/quotes");
this.checkIfError(response, this.loadingQuotes);
}
But this obviously doesn't work. How could I pass a reference this way?
I was thinking of passing an object literal like this.checkIfError(response, {targetStatus: this.loadingQuotes}) but suspect this just passes {status: true}.

How to disconnect derivative objects in getter from Vuex store state?

I have a Vuex getter like this:
sectionsAndSubSectionsJoined(state) {
var sections = state.aBMudbone.sections;
var subsections = state.aBMudbone.subSections;
var combinedSections = [];
_.forEach(sections, function (section) {
var subSectionsFiltered = _.filter(subsections, ['sectionId', section.sectionId]);
var sectionAndSubSections = section;
sectionAndSubSections.children = subSectionsFiltered;
combinedSections.push(sectionAndSubSections);
});
return combinedSections
}
In the console I get the following error:
[vuex] do not mutate vuex store state outside mutation handlers.
The line it shows this error for is :
sectionAndSubSections.children = subSectionsFiltered;
As I understand it, even though sections, subSections and sectionAndSubSections are new objects, because they are created from the store state they are subject to some binding hence the warning when I try to add to this state.
How can I disconnect this new state from the store state so I don't get this warning?

How to access 'this' tag instance inside tag lifecycle event?

I'm trying to update an array every time my tag receives an update from parent tags. Here is my code:
var tag = function(opts){
this.set = [];
var self = this;
this.on('updated', function(){
var obj = opts.my_topics;
var better_obj = {};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var topic_title = key;
better_obj = obj[key];
better_obj['title'] = key;
}
}
self.set.push(better_obj);
})
}
Whenever I try to push(), I get an error: Uncaught SyntaxError: Unexpected token ; database.js:60. The moment I remove the line of code for the push, the error disappears. Am I using this/self wrong in this case or could it be something else?
What I am trying to accomplish here is taking an object from opts (which receives regular updates), converting into an array, and using it for an each loop within my tag. I do not know how to do this other than a) what i'm trying to do now by accessing this, or b) rewiring my opts to deliver an array rather than an object (which is currently failing for me as I'm using Redux and it doesn't like dispatching non-objects).

vue.js - Cannot read property 'toLowerCase' of undefined

I am filtering projects with a computed property like this:
filtered_projects() {
return this.projects.filter( (project) => {
return project.title.toLowerCase().indexOf(this.project_filter.toLowerCase()) !== -1
})
}
When I add a new project using this
submitNewProject() {
let path = '/api/projects';
Vue.http.post(path, this.project)
.then( (rsp) => {
this.projects.push(rsp.data);
this.project = this.getSingleProject();
this.create_project = false;
return true;
});
}
This is giving me an error that I can't find
TypeError: Cannot read property 'toLowerCase' of undefined
It may just be that you are not correctly passing the projects data to the projects array.
Firstly vue-resource now uses body not data to get the response, therefore you may need to use:
this.projects.push(rsp.body)
then this will give you a single array item containing all projects which doesn't look like what you want. I believe instead you're after:
this.projects = rsp.body
Assuming the response body is an array of objects this will then allow:
this.projects.filter(project => {})
to work as expected. Meaning project.title should now be valid
EDIT
For a project title to be set to lowerCase you must be returning an object with a title param, i.e.
rsp.body = {
title: 'FOO',
}
which you'd then set on the projects array via:
this.projects.push(rsp.body)
so the first thing to fix is your response, sort your endpoint so it returns what you are expecting, then the rest of the above code should work
You need preserve "this" before Vue.http.post (self=this) and then in callback change this.projects to self.projects.
Explanation:
How to access the correct `this` context inside a callback?

Multiple methods on the same route in Express

I have 3 different method responses in the API I'm working on currently set up like this:
app.use('/image', require('./routes/image/get'));
app.post('/image', require('./routes/image/post'));
app.put('/image', require('./routes/image/put'));
Is there a better way to do this?
You may use .route() on your app's Express object to reduce some of the redundancy in your route definitions.
app.route('/image')
.post(require('./routes/image/post'))
.put(require('./routes/image/put'));
There is also .all(), which will invoke your handler regardless of the request http method.
No use()
I've omitted .use(), mentioned above, because it is not available on Route objects -- it sets up application middleware. Routers are another layer of middleware (see this question for an explanation of the difference). If the intent is really to call .use(), and not .get(), then that line would have to stay, before the call to .route() (middleware registration order matters).
Reusing the same handler for different http methods
If one would prefer to reuse the same handler for a set of methods, in the following style:
app.route("/image").allOf(["post", "put"], function (req, res) {
//req.method can be used to alter handler behavior.
res.send("/image called with http method: " + req.method);
});
then, the desired functionality can be obtained by adding a new property to express.Route's prototype:
var express = require('express');
express.Route.prototype.allOf = function (methods /*, ... */) {
"use strict";
var i, varargs, methodFunc, route = this;
methods = (typeof methods === "string") ? [methods] : methods;
if (methods.length < 1) {
throw new Error("You must specify at least one method name.");
}
varargs = Array.prototype.slice.call(arguments, 1);
for (i = 0; i < methods.length; i++) {
methodFunc = route[methods[i]];
if (! (methodFunc instanceof Function)) {
throw new Error("Unrecognized method name: " +
methods[i]);
}
route = methodFunc.apply(route, varargs);
}
return route;
};