Angular - Knockout模型共享

我想将Angular模型绑定到Knockout组件。它正在工作 - 当Angular模型更改Knockout绑定时适用。但问题的方向相反 - 我希望Angular模型在Knockout组件更改时进行更新，并且在不触及组件的情况下（它不必知道Angular包装器）。目标 - 使用Angular在KO组件周围构建一个快速原型框架，该组件正在其他环境中使用。 KO组件可以并应该共享模型（来自Angular wrapper），因此这个问题。Angular - Knockout模型共享

编辑：这是一个jsFiddle示例来展示我想要达到的目标。它是一种简化，因为在现实世界中，KO组件将使用内部虚拟机，这将难以收看。但即使在这里，我也不明白为什么$ watch不起作用。

var sharedData = { 
    personName: "alex", 
    personAge: "32" 
}; 


function WrapperCtrl($scope){ 
    $.each(sharedData, function(key, value) { 
     sharedData[key] = (typeof value !== "function") ? ko.observable(value) : value; 
    }); 

    $scope.wrapData = sharedData; 

    ko.applyBindings(sharedData, document.getElementById("ko_1")); 
    ko.applyBindings(sharedData, document.getElementById("ko_2")); 

    $scope.$watch(
     function() { 
      return sharedData.personName(); 
     }, 
     function(newValue, oldValue) { 
      console.log("change"); 
     } 
    ); 

    $scope.doSomething = function(){ 
     console.log("before angular function: ", $scope.wrapData.personName(), $scope.wrapData.personAge()) 
     sharedData.personName('Bob').personAge(41); 
     console.log("after angular function: ", $scope.wrapData.personName(), $scope.wrapData.personAge()) 
    }; 
} 


function doSomething() { 

    console.log("before knockout function", sharedData.personName(), sharedData.personAge()) 
    sharedData.personName('Mary').personAge(25); 
    console.log("after knockout function", sharedData.personName(), sharedData.personAge()) 
}

来源

2013-10-15 krulik

请做出的jsfiddle例子或张贴一张你的代码。 – frkk

这里是小提琴：http://jsfiddle.net/HmcnB/10/ – krulik

如果你不允许直接插入角度绑定到你的组件，那么你将不能够火过你的消化周期等角度会不知道你的数据源已更新。解决这个的方法之一是定期调用$申请，这将与任何外部的变化，这样的更新模式：

setInterval($scope.$apply, 500);

http://jsfiddle.net/HmcnB/11/

来源

2013-10-15 14:56:54

变量的范围是什么？我如何才能观察KO组件内的数据？ – krulik

请参阅附件提琴：http://jsfiddle.net/HmcnB/10/ – krulik

对不起，我的错误 - 因为你的淘汰赛组件必须完全独立于你的角度 - 没有办法让角度知道它需要执行消化周期，所以它不会激发你的观察者。处理这个问题的一个（稍微粗糙的）方法是调用一个周期性的$ apply，它将用更改来更新您的范围模型。 http://jsfiddle.net/HmcnB/11/ –

Angular - Knockout模型共享

回答

相关问题