KO.Computed equivalente in angolare/Breeze Initializer

Question

Cercando di ottenere una comprensione più approfondita di come angolare vincolante e comprendere meglio e una cosa dati ossequi è difficile ottenere la mia testa intorno -

In Knockout io uso un computato per tenere traccia delle modifiche a una proprietà. In Angolare è spostare questa logica nella vista, che è una cosa banale per me, ma se questo è il modo per farlo, capisco.

La mia domanda è quando sto inizializzando una nuova entità con Breeze/Angular come posso creare proprietà calcolate come informate quando vengono apportate modifiche alla proprietà delle entità?

myEntity.fullName = ko.computed(function() { 
    return myEntity.firstName + ' ' + myEntity.LastName; 
}); 

nella angolare sarebbe l'equivalente essere

myEntity.fullName = function() { 
    return myEntity.firstName + ' ' + myEntity.LastName; 
}; 

E vuol monitorare correttamente l'entità?

Answer 1

Si è corretto per renderlo semplicemente una funzione. Se si aggiunge la vostra entità come mostrato a $scope, allora si dovrebbe accedere alla proprietà in questo modo:

<span class="fullname">{{ user.fullName() }}</span> 

Ogni volta angolare esegue un ciclo di $digest, controllerà per un cambiamento alla proprietà bound. In questo caso, significa che chiamerà la funzione fullName() e verificherà se il risultato è stato modificato. In caso affermativo, tutto ciò che ha un $watch collegato a quell'elemento, incluso il binding semplice, verrà informato della modifica.

Un avvertimento di questa tecnica, tuttavia, è quello di assicurarsi che le operazioni eseguite all'interno della funzione siano relativamente veloci e che non abbiano effetti collaterali. Le funzioni associate come questa verranno chiamate più volte nell'applicazione.

Se è necessario disporre di una funzione più complessa, sarebbe meglio gestirla all'interno del controller e aggiornare manualmente una proprietà sull'oggetto quando cambia.

Answer 2

Ho trovato la risposta sul seguente sito Web. Se non fai qualcosa di simile, quello che troverai è che le funzioni all vengono eseguite durante la fase di digest e non vengono attivate dal cambiamento di una proprietà osservabile o dipendente. La soluzione seguente consente di attivare la funzione solo quando viene modificato un valore che utilizza.

http://www.jomendez.com/2015/02/06/knockoutjs-computed-equivalent-angularjs/

Spiega come duplicare la funzionalità di sottoscrizione e calcolato in knockoutjs

var myViewModel = { 
    personName: ko.observable('Bob') 
}; 
myViewModel.personName.subscribe(function(oldValue) { 
    alert("The person's previous name is " + oldValue); 
}, null, "beforeChange"); 

Questo è quello che ho trovato, come risultato della mia ricerca (questo è l'AngularJs equivalenti) Utilizzo del $ ambito. $ guardare metodo di vedere il ciclo di vita AngularJs https://docs.angularjs.org/guide/scope

$scope.myViewModel = { 
    personName: 'Bob' 
}; 
$scope.$watch(‘myViewModel.personName’, function(newValue, oldValue){ 
    //we are able to have both the old and the new value 
    alert("The person's previous name is " + oldValue); 
}); 

//knockout computed 
var isVendorLoading = ko.observable(), 
isCustomerLoading = ko.observable(), 
isProgramLoading = ko.observable(), 
isWaiting = ko.observable(); 

var isDataLoading = ko.computed(function() { 
    return isVendorLoading() || isCustomerLoading() || isProgramLoading() || isPositionLoading() || isWaiting();  
}); 

Questa è l'AngularJs equivalente per KnockoutJs bozzetto uted:

$scope.isDataLoading = false; 
$scope.$watch(
    function (scope) { 
     //those are the variables to watch 
     return { isVendorLoading: scope.isVendorLoading, isCustomerLoading: scope.isCustomerLoading, isProgramLoading: scope.isProgramLoading, isWaiting: scope.isWaiting }; 
    }, 
    function (obj, oldObj) { 
     $timeout(function() { 
       //$timeout used to safely include the asignation inside the angular digest processs 
       $scope.isDataLoading = obj.isVendorLoading || obj.isCustomerLoading || obj.isProgramLoading || obj.isPositionLoading || obj.isWaiting; 
     }); 
    }, 
    true 
);