21

Angular がデータ バインディングをどのように処理し、それをよりよく理解するかをより深く理解しようとしています。

Knockout では、プロパティへの変更を追跡するために計算を使用します。Angular では、このロジックをビューに移動することは、私にとっては些細なことですが、それがその方法である場合、私は理解しています。

私の質問は、Breeze/Angular で新しいエンティティを初期化するときに、エンティティ プロパティに変更が発生したときに通知される、計算されたようなプロパティを作成するにはどうすればよいですか?

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

Angularでは、同等のものは次のようになります

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

そして、それはエンティティを適切に追跡しますか?

4

2 に答える 2

0

以下のサイトに答えがありました。同様のことをしないと、すべての関数がダイジェスト フェーズで実行され、従属オブザーバブルまたはプロパティの変更によってトリガーされないことがわかります。以下のソリューションでは、使用する値が変更されたときにのみ関数をトリガーできます。

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

ノックアウトjsでサブスクライブと計算機能を複製する方法を説明します

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

これは私の調査の結果として見つけたものです (これは AngularJs に相当するものです) $scope.$watch メソッドを使用して、AngularJs のライフ サイクルを参照してください

$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();     
});

これは、計算された KnockoutJs に相当する AngularJs です。

$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
);
于 2015-10-07T23:31:03.503 に答える