Question

尝试更深入地了解Angular如何处理数据绑定并更好地理解数据，并且有一件事情很难理解 -

在Knockout中，我使用一个计算来跟踪属性的变化。在Angular中，它将这个逻辑移动到视图中，这对我来说是微不足道的，但如果这是我理解的方式。

我的问题是，当我使用Breeze / Angular初始化一个新实体时，如何创建类似于计算机的属性，这些属性会在实体属性发生更改时得到通知？

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

Angular中的

等同于

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

这是否正确跟踪实体？

Answer 1

简单地将它变成一个函数是正确的。如果您显示的实体已添加到$scope，那么您将访问该属性，如下所示：

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

每当Angular运行$digest个周期时，它将检查绑定属性的更改。在这种情况下，这意味着它将调用fullName()函数并检查结果是否已更改。如果有，那么任何附加有$watch项的内容（包括简单绑定）都会收到更改通知。

然而，这种技术的一个警告是确保在您的功能中执行的操作相对较快，并且没有副作用。像这样的绑定函数将在整个应用程序中多次调用。

如果你需要一个更复杂的函数，最好在控制器中处理它，并在它改变时手动更新对象的属性。

Answer 2

我在以下网站上找到了答案。如果你没有做类似的事情，你会发现所有函数在摘要阶段运行，而不是由依赖的observable或属性的更改触发。下面的解决方案允许您仅在其使用的值发生更改时触发该函数。

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's 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'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
);

KO.Angular / Breeze Initializer中的计算等效项

2 个答案: