Ember: how to set correctly Controller property - javascript

I updated a property of Controller and attempted to use it in a console.log(). In the HTML page I see the updated value of the property, but console.log() still shows me the old value. What did I do wrong? How to get the new value in console.log()?
Details are in http://emberjs.jsbin.com/AHiVeGe/3/edit

First, you have to use 'get' on a property. Instead of:
console.log(this.controllerFor('index').latitude);
write
console.log(this.controllerFor('index').get('latitude'));
Second, navigator.geolocation.getCurrentPosition runs asynchronously and returns immediately, so your console.log is running before latitude is set, but after it returns.
Third, the model hook runs before the controller is set up.
Fourth, the model has to be an object.
I wasn't quite sure what you wanted to do, but in http://emberjs.jsbin.com/AHiVeGe/6/edit I change a property on the model after the latitude is set and console.log it.

Related

Knockout bindingHandler causes pureComputed evaluation delay

I found that my bindingHandler causes unexpected pureComputed evaluation delay.
Demo here
Without binding handler
Without binding handler (simply comment the HTML out), I see the following log:
In subscription, new value is (newName), nameComputed is (newNameComputed)
As you can see, in the subscription, the computed was evaluated to the latest value.
With binding handler
With binding handler, I see the following log:
Evaluation in bindingHandler oldNameComputed
In subscription, new value is (newName), nameComputed is (oldNameComputed)
Evaluation in bindingHandler newNameComputed
As you can see, in the subscription, the computed was still using the old value (oldNameComputed), and in the next evaluation it's evaluated to latest value (newNameComputed)
Question
This is unexpected to me -- adding the binding handler changes the evaluation behavior.
How to explain this? Is this a bug or expected?
How to work around this? Do I have not to use pureComputed but use observable for nameComputed and set it in subscription on name?
Update 12/26/2019
Adding a bit context. My nameComputed is actually nameError which processes the name and detects whether the input is allowed or has errors (e.g. no special character, nonempty, max length etc).
In the subscription, I wanted to do some ajax calls if there is no name error. So I looked at the value of nameError and only fires the requests if there is no error.
But with the binding handler, my nameError check is outdated.
Yes, I do have the latest name value in the subscription, but I need to call the name error check function again to get the latest nameError value instead of directly using nameError computed value.
Credit to mbest in Github Issue
The first section in the pure computed documentation describes its two states. The difference you see in behavior is because the pure computed is in a different state. Without the binding handler, it is in the sleeping state, and with the binding handler, it is in the awake state.
It is normal that a subscription can run while state is being updated, and thus not all computed observables have been updated with the latest value. The main way to work around this is use deferred updates. If you set ko.options.deferUpdates = true;, you will get the results you want.
I might not go in this route for now because I'm working on a big project and don't want to introduce this global level change for now.

How can I avoid "parse" validation error for custom angularjs directive when setting model to undefined?

I have a directive for a date input field that uses $formatters and $parsers to modify the model and view value.
Whenever I clear the input field I want to set the model value to undefined. This is done by returning undefined from the $parsers function. The problem is that when invalid is returned from a $parsers function the input will get invalid:
$error":{"parse":true},
Is there some way to set the model value to undefined without making it invalid?
Example on jsfiddle
Edit:
The only solution I've come up with so far is setting a timeout before returning undefined from the $parser function:
$timeout(function(){
ngModel.$setValidity('parse', true);
}, 0);
return undefined;
This feels like a hack however.
As Paulo points out above, if it works for your situation, returning null (or some comparable blank value that's not undefined) is probably your best bet.
Unfortunately, it seems that returning undefined will definitely cause the $parsers pipeline to stop and force an error state.
Your $timeout definitely does feel like a hack, but if you REALLY have to return undefined, it's probably the only way.

error with name or value of a variable

I have a weird error with name of my variable :
when i try to call function map.removeLayer($scope.pimp.init.carte.layers[key].name);, it's doesnt works (no error, but action is not performed)
when i put manually map.removeLayer(markersLayer_2); it's good, markersLayer_2 is the value of $scope.pimp.init.carte.layers[key].name, and the action is performed
i don't why this difference, because with alert(); or console.log(); , $scope.pimp.init.carte.layers[key].name returns the good value (markersLayer_2).
Why i can't use $scope of angularjs in this leaflet function ?
Method removeLayer expects an instance of L.Layer, not the name property of that instance. Try: map.removeLayer($scope.pimp.init.carte.layers[key]); What you are doing now is using a string as the parameter. That won't work. You need to use the actual instance.
Reference: http://leafletjs.com/reference.html#map-removelayer

Javascript object property logs normally but is undefined?

I have a Javascript object that gets initialised in an asynchronous manner, later edited and then stored in an array until it can be saved. The problem is that one of the checks it goes through is _.has(obj, 'Id'). This test always fails. I've used JSON.stringify() to log the object's internals and everything has its value and looks correct. When I run a simple test of this line with hard-coded values in plunker, everything works as expected. I've tried accessing the Id values through obj.Id and obj['Id'] but these both return undefined and I don't know why. Why can stringify read the property but a regular accessor can't? The Id is a value that is not touched between initialisation and saving of the object.

javascript console.log displays different values on same object

I'm working on an AngularJS app. When I console.log an object (the attrs parameter of directive linking function) the browser show unconsistent results for the parameter "editable" (see image). In Chrome, the property gets valued as both "zzz" and undefined (see 5th row vs 1st). In Safari the output is displayed differently, but on console.log(object) the "editable" property appears as "zzz", while on console.log(object.editable) the property is undefined.
Any hints ?
I think this issue is related to: console.log() showing contradictory values for the same object property
I'll guess that your HTML is something like this
<div my-directive editable="{{someScopeProperty}}"...></div>
and that you are calling console.log() in your link function. When the link function runs, interpolated attributes are not defined yet (you need to use $observe or $watch to asynchronously get the interpolated value), so you'll get undefined if you attempt to log the value. Soon after, the value gets defined, and Chrome seems to automatically update the value (which is really a reference, I think) in the console where you logged the full object (not just the individual value).

Categories

Resources