knockoutjs - 如何观察全局变量变化答案

【问题标题】：knockoutjs - How to observe global variable changeknockoutjs - 如何观察全局变量变化
【发布时间】：2021-01-26 18:17:30
【问题描述】：

我需要观察变量myGlobalVar。我需要检测对它的更改并显示它们。

function AppViewModel() {
    this.myVar = ko.observable(myGlobalVar);
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<script>myGlobalVar = "Foo";</script>

<p>Test: <strong data-bind="text: myVar"></strong></p>

<script>
setTimeout(function() {
    myGlobalVar = "Bar";
    console.log("myVar set to 'Bar'. Proof:");
    console.log(myGlobalVar);
}, 1000);
</script>

在上面的示例代码中，我最初将window.test 设置为“Foo”，然后在 3 秒后将其设置为“Bar”，但未检测到更改。

【问题讨论】：

您无法观察到变量的变化。有解决方法。您可以创建一个 proxy 对象，其中所有监视的变量作为代理的键。并在每个属性更改时使用代理集处理程序更新 viewModel 中的相应属性。 Listening for variable changes in JavaScript

标签： knockout.js

【解决方案1】：

您可以只更新 observable 而不是全局变量，为此我为您做了一个示例，如何使用 vm.myVar(value) 从任何地方更改它

如果您认为这没有帮助，请三思而后行，您可以创建一个区间函数来设置当前全局变量，例如 vm.myVar(myGlobalVar)

这就是“可观察”存在的原因希望它真的有帮助;)

myGlobalVar = "Foo";
function AppViewModel() {
    this.myVar = ko.observable(myGlobalVar);
}

// Activates knockout.js (you see i´m assigning var vm)
var vm = new AppViewModel();
ko.applyBindings(vm);

setTimeout(function() {
    // edit the observable to update view
    vm.myVar("Bar") ;
    console.log("myVar set to 'Bar'. Proof:");
    console.log(vm.myVar());
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<script>myGlobalVar = "Foo";</script>

<p>Test: <strong data-bind="text: myVar"></strong></p>

【讨论】：

谢谢，通过修改stackoverflow.com/a/64332294/4684797 解决了

【解决方案2】：

我能够通过“john Smith”的答案解决它，我对其进行了更改以添加更改方法。我也可以只使用间隔，但在这种情况下更改会更好。

myGlobalVar = "Foo";
function AppViewModel() {
    this.myVar = ko.observable(myGlobalVar);
}

// Activates knockout.js (you see i´m assigning var vm)
var vm = new AppViewModel();
ko.applyBindings(vm);

setTimeout(function() {
    // edit the observable to update view
    vm.myVar("Bar") ;
    console.log("myVar set to 'Bar'. Proof:");
    console.log(vm.myVar());
}, 1000);



$("#globalVarField").change(function() {
    myGlobalVar = $(this).val();
    console.log("globalVarField changed to '"+ myGlobalVar + "'");
    
    vm.myVar(myGlobalVar);
});

.as-console-wrapper { max-height: 100px !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<script>myGlobalVar = "Foo";</script>

<p>Test: <strong data-bind="text: myVar"></strong></p>

Enter a value for myGlobalVar: <input type="text" id="globalVarField">

【讨论】：