KO.Компьютерный эквивалент в Angular/Breeze Initializer

Попытка получить более глубокое представление о том, как Angular обрабатывает привязку данных и лучше понимает ее, а одна вещь трудно обойти вокруг -

В нокаут я использую рассчитанный для отслеживания изменений свойства. В Angular это переместить эту логику в представление, которое для меня тривиально, но если это способ сделать это, я понимаю.

Мой вопрос в том, когда я инициализирую новый объект с помощью Breeze/ Angular, как мне создать свойства с вычисленными значениями, которые будут уведомлены, когда произойдут изменения в свойстве объектов?

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

в Angular эквивалент был бы

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

И правильно ли отслеживает объект?

Ответы

Ответ 1

Вы правы, чтобы просто сделать его функцией. Если ваш объект, как показано, добавлен в $scope, вы получите доступ к свойству следующим образом:

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

Всякий раз, когда Angular запускает цикл $digest, он проверяет изменение связанного свойства. В этом случае это означает, что он вызовет функцию fullName() и проверит, изменился ли результат. Если у него есть, все изменения, привязанные к этому элементу $watch, включая простое связывание, будут уведомлены об изменении.

Одно из предостережений этого метода, однако, состоит в том, чтобы убедиться, что операции, выполняемые в вашей функции, относительно быстрые, а также не имеют побочных эффектов. Связанные функции, подобные этому, будут вызываться много раз во всем приложении.

Если вам нужна более сложная функция, было бы лучше обработать ее в контроллере и обновить свойство объекта вручную, когда оно изменится.

Ответ 2

Я нашел ответ на следующем веб-сайте. Если вы не сделаете что-то подобное, то вы обнаружите, что функции all запускаются во время фазы дайджеста и не инициируются изменением зависимого наблюдаемого или свойства. Нижеприведенное решение позволяет вам запускать функцию только тогда, когда изменяется значение, которое оно использует.

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

Объясняет, как дублировать подписку и вычисленную функцию в knockoutjs

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

Это то, что я нашел в результате моих исследований (это эквивалент AngularJs). Использование метода $scope. $watch см. жизненный цикл 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 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();     
});

Это эквивалент AngularJs для вычислений KnockoutJs:

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