Question

我需要观察变量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”，但是未检测到更改。

Answer 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>

Answer 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">

Knockoutjs-如何观察全局变量的变化

2 个答案: