如何对全局变量更改进行 Knockout 更新答案

【问题标题】：How to have Knockout update on global variable change如何对全局变量更改进行 Knockout 更新
【发布时间】：2018-05-29 11:36:37
【问题描述】：

我正在使用敲除来绑定一些输入框上的值。我还将模型设置为订阅全局变量（数据）的值。

function AppViewModel() {
        this.username = ko.observable(data.user.name);
        this.name = ko.observable(data.visibleByRegisteredUsers.name);
        this.phone = ko.observable(data.visibleByRegisteredUsers.phone);
        this.gender = ko.observable(data.visibleByRegisteredUsers.gender);
        this.distance = ko.observable(data.visibleByRegisteredUsers.distance);
        this.address = ko.observable(data.visibleByRegisteredUsers.address);
        this.postcode = ko.observable(data.visibleByRegisteredUsers.postcode);
        this.latitude = ko.observable(data.visibleByRegisteredUsers.latitude);
        this.longitude = ko.observable(data.visibleByRegisteredUsers.longitude);

        this.name.subscribe(function (newData) {
            data.visibleByRegisteredUsers.name = newData;
        });
        this.phone.subscribe(function (newData) {
            data.visibleByRegisteredUsers.phone = newData;
        });
        this.gender.subscribe(function (newGender) {
            data.visibleByRegisteredUsers.gender = newGender;
        });
        this.distance.subscribe(function (newData) {
            data.visibleByRegisteredUsers.distance = newData;
        });
        this.address.subscribe(function (newData) {
            data.visibleByRegisteredUsers.address = newData;
        });
        this.postcode.subscribe(function (newData) {
            data.visibleByRegisteredUsers.postcode = newData;
        });
        this.latitude.subscribe(function (newData) {
            data.visibleByRegisteredUsers.latitude = newData;
        });
        this.longitude.subscribe(function (newData) {
            data.visibleByRegisteredUsers.longitude = newData;
        });


    }

    ko.applyBindings(new AppViewModel());

我正在像这样绑定输入值：

<input type="text" class="form-control" placeholder="Lat" id="lat" aria-describedby="basic-addon1" required data-bind="value:latitude">

如果我随后更新数据对象，例如为 data.visibleByRegisteredUsers.latitude 设置值，则输入框不会被更新。我的设置有什么不正确的地方吗？

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

您正在初始化视图模型的属性，其值存储在 data 对象及其嵌套内容中。

在初始化之后（例如：this.latitude = ko.observable(someValue)），你的 observable 只不过是一个带有值的包装器。使用新值调用包装器并更新。 (this.latitude(10)) 在没有值的情况下调用它，它就会展开。 (this.latitude(); // 10)

即：初始化后，您不应该触摸data 对象。您通过更新视图模型进行更改。如果要解析回原始格式，则必须自己编写逻辑。

const data = {
  visibleByRegisteredUsers: {
    latitude: 54
  }
};

function AppViewModel() {
  /* ... */
  this.latitude = ko.observable(data.visibleByRegisteredUsers.latitude);
  
  this.latitude.subscribe(console.log);
};

ko.applyBindings(new AppViewModel);

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

【讨论】：

【解决方案2】：

这不起作用是正常的。 Knockout 使用 observables 进行数据绑定。当数据对象更改时，您定义的可观察对象不会收到通知，因为它不是可观察对象。您可以做的是在虚拟机中设置一个可观察的对象，该对象填充了全局变量。然后订阅它并更新全局。仍然不确定你为什么想要这个，但是嘿；它可能会这样工作。

【讨论】：