I use KnockoutJS in my projects, but want to learn AngularJS as it has a lot of tasty features that Knockout doesn't have. So I'm interested in rewriting some of my code using Angular. But I don't understand how to do some simple things that I use in Knockout. For example, Knockout has a feature of computed observables. It's cool! I've already found that I can use a simple function instead. But Knockout provides "write" function to a computed observables, like:
var first_name = ko.observable('John'),
last_name = ko.observable('Smith'),
full_name = ko.computed({
read: function(){
return first_name() + ' ' + last_name();
},
write: function(new_value){
var matches = new_value.match(/^(\w+)\s+(\w+)/);
first_name(matches[1]);
last_name(matches[2]);
}
});
This code on JSFiddle: http://jsfiddle.net/Girafa/QNebV/1/
This code allows me to update the "first_name" and "last_name" observables when I change the "full_name" one. How it can be done using AngularJS? A function with an argument being checked for existence? Something like this?
first_name = 'John';
last_name = 'Smith';
full_name = function(value){
if (typeof value != 'undefined')
{
// do the same as in the Knockout's write function
}
else
{
// do the same as in the Knockout's read function
}
}
What is the best practice?
In some scenarios, it is useful to programmatically determine if you are dealing with a computed observable. Knockout provides a utility function, ko. isComputed to help with this situation. For example, you might want to exclude computed observables from data that you are sending back to the server.
ko. computed( evaluator [, targetObject, options] ) — This form supports the most common case of creating a computed observable. evaluator — A function that is used to evaluate the computed observable's current value. targetObject — If given, defines the value of this whenever KO invokes your callback functions.
An observable is useful in various scenarios where we are displaying or editing multiple values and require repeated sections of the UI to appear and disappear as items are inserted and deleted. The main advantage of KO is that it updates our UI automatically when the view model changes.
I've found such a solution: http://jsfiddle.net/Girafa/V8BNc/
Instead of using angular $watch method, we set native javascript getter and setter of the fullName property:
Object.defineProperty($scope, 'fullName', {
get: function(){
#...
},
set: function(newValue){
#...
}
})
Think this is more convenient as I don't need to make any special watchers in the code. But I don't know about browser support of this solution.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With