角/风起动器中的等效KO.

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (21)

在Knockout中,我使用计算来跟踪属性的更改。

我的问题是,当我用Breeze/角初始化一个新实体时,如何创建在实体属性发生更改时通知的类似计算的属性?

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

在角度上,等效为

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

这能正确地追踪实体吗?

提问于
用户回答回答于

简单地把它变成一个函数是正确的。如果实体如图所示被添加到$scope,然后将访问该属性,如下所示:

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

每当角运行时$digest循环,它将检查绑定属性的更改。在这种情况下,这意味着它将调用fullName()函数并检查结果是否已更改。如果有,任何有$watch该项目的附件--包括简单装订--将被通知更改。

One caveat of this technique, however, is to make sure that the operations being performed within your function are relatively fast, and also have no side effects. Bound functions like this will be called many times throughout the application.

如果需要一个更复杂的函数,最好在控制器中处理这个问题,并在对象发生更改时手动更新它。

用户回答回答于

我在下面的网站上找到了答案。如果你不做类似的事情,你会发现函数在摘要阶段运行,而不是由依赖的、可观察的或属性的变化触发的。下面的解决方案只允许在它使用的值发生更改时触发该函数。

解释如何在okckoutjs中复制订阅和计算功能。

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

这就是我使用$Scope进行研究的结果(这是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();     
});

这是计算出的KnockoutJ的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
);

扫码关注云+社区